根據 object 屬性更新對象數組中的項

Question

我有一個具有以下結構的對象數組，如何根據 object 屬性（ name ）之一更新對象的數據（ file ）？ 例如，如何使用新file object 更新名為test1的 object？

我已經嘗試過了，但是正確的 object 沒有更新，而是將新的 object 推送到陣列中，我做錯了什么？

const [files, setFiles] = useState(fileArr)

const setFile = (name, data) => {
  setFiles(files => ({...files, [name]: {...files[name], ...data}}))
}

fileArr數組：

const fileArr= [
  {
    name: 'test1',
    status: 'Required',
    file: {}
  },
  {
    name: 'test2',
    status: 'Required',
    file: {}
  },
  {
    name: 'test3',
    status: 'Required',
    file: {}
  }
]

Answer 1

假設以下結構

const fileArr= [
  {
    name: 'test1',
    status: 'Required',
    file: {}
  },
  {
    name: 'test2',
    status: 'Required',
    file: {}
  },
  {
    name: 'test3',
    status: 'Required',
    file: {}
  }
]

根據name更新 object 以替換file的正確方法是

const onChange = (name, data) =>{
    setItems(items => items.map(item =>{
        if(item.name === name)
            //assuming you want to spread instead of overwrite 'file'
            return {...item, file:{...item.file, ...data}}

        return item
    }))
}

此外，您正在使用fileList初始化您的 state ，基於您嘗試更新的方式是object ，但您將fileArr發布為您的數據結構。 所以我假設你想在fileArr而不是fileList中執行你的操作（我不知道它的樣子）

Answer 2

我很確定這是因為您在 setFiles 中使用[name]時沒有引用以前的files 。 我原以為以下應該有效。

const setFile = (name, data) => {
  setFiles(files => ({...files, files[name]: {...files[name], ...data}}))
}