时间戳

首页 > 解决方案 > 如何将对象添加和更新到对象数组中？

javascript - 如何将对象添加和更新到对象数组中？

问题描述

我正在尝试将对象动态添加到对象数组中，我一直在尝试解构主对象，但它在父数组的末尾添加了一个数字。这就是我所拥有的：

const [data, setData] = useState ([
 {
     _id:1,
     firstName:'Leo',
     lastName:'Miller',
     telephone:'+569273829',
     mail:'leo.miller@gmail.com',
     work:[
          {_id:1, startWorkDate:'01/01/2015', endWorkDate:'01/02/2017', work:'description...'},
          {_id:2, startWorkDate:'01/01/2018', endWorkDate:'01/02/2020', work:'description...'}
     ]
}];

我动态生成这个对象：

const value = {_id:3, startWorkDate:'01/01/2018', endWorkDate:'01/02/2020', work:'description...'}

我需要将它添加到 data.work 之后只更新描述work._id[3]

我尝试使用此功能

const addNewWork = (value) => {
        let copyData = [...data, data[0].workExperience.push(value)]
        return setData(copyData)
    }

但由于某种原因没有正确添加对象。请帮忙！

标签： javascriptreactjsecmascript-6

解决方案

你有一个数组而不是一个对象。你的陈述

 let copyData = [...data, data[0].workExperience.push(value)]

正在做两件事：

  1. 通过做来改变状态push()。这不是反应方式。
  2. 创建一个新数组。还将一个新项目添加到数组中，但这是data[0].workExperience.

的返回值为Array.prototoype.push：

调用方法的对象的新长度属性。

你要做的是：

制作数组的副本。可以...在这里使用（扩展运算符）。
制作所需数组对象的副本（第一个索引）。尝试将对象添加到其特定属性workExperience。

const addNewWork = (value) => {
       let newData = [...data];
      let newWorkExperienceArray = 
       [...data[0].workExperience,value];
      
       let newDataFirstObject = {...data[0], workExperience : newWorkExperienceArray};
        newData[0] =  newDataFirstObject;
        return setData(newData)
    }

您还可以更新属性。我没有在您的问题中找到关于我必须更新什么的相关代码，所以我没有更新第三个 workExperience 对象中的任何内容。

编辑：在您的代码中，属性名称似乎是work而不是workExperience. 请确认。上面的代码使用，如果是这种情况workExperience，您可以将其替换为work

推荐阅读