javascript - 根据对象属性更新对象数组中的项目

Question

这个问题已经有答案了:

Whats the best way to update an object in an array in ReactJS? (4 个回答)

已关闭 3 年前。

我有一个具有以下结构的对象数组，如何根据对象属性之一( file )更新对象的数据( name )？例如，如何更新名为: test1 的对象有了新的file对象？

我已经尝试过，但正确的对象没有被更新，而是一个新对象被推送到数组中，我做错了什么？

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更新对象以替换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 初始化您的状态，该状态基于您尝试更新的方式，是一个对象，但您发布了 fileArr > 作为您的数据结构。所以我假设您想在 fileArr 而不是 fileList 中执行操作(我不知道它是什么样子)