React中如何为对象数组内嵌套的对象数组添加、更新元素？

错误原因 #

• Array.push() 方法返回值是修改后数组的长度，而非数组本身，你将该返回值追加到解构后的data数组末尾，就会出现多余的数字
• 直接修改原state中的data[0].work属于突变状态的操作，不符合React状态更新的不可变原则，可能引发渲染异常
• 原数据中存储工作经历的字段为work，你代码中误用了不存在的workExperience字段

正确实现 #

新增work项的函数 #

如果你的data数组后续可能存在多个用户对象，推荐用通用写法：

const addNewWork = (value) => {
  const newData = data.map((user, index) => {
    // 仅修改下标为0的用户数据
    if (index === 0) {
      return {
        ...user,
        // 复制原有work数组后追加新对象，不修改原数组
        work: [...user.work, value]
      }
    }
    return user
  })
  setData(newData)
}

如果确定data数组永远只有1个用户对象，可以简化为：

const addNewWork = (value) => {
  const newData = [{
    ...data[0],
    work: [...data[0].work, value]
  }]
  setData(newData)
}

后续更新指定_id的work项 #

如果需要修改_id为3的work项描述，可参考如下实现：

const updateWorkDesc = (workId, newDesc) => {
  const newData = data.map((user, index) => {
    if (index === 0) {
      return {
        ...user,
        work: user.work.map(workItem => {
          // 匹配到对应_id的项时更新描述，其余项保持不变
          if (workItem._id === workId) {
            return {
              ...workItem,
              work: newDesc
            }
          }
          return workItem
        })
      }
    }
    return user
  })
  setData(newData)
}

// 调用示例：修改_id为3的工作描述
// updateWorkDesc(3, '新的工作描述内容')

内容的提问来源于stack exchange，提问作者aloredo