如何在React Hooks中正确更新state内嵌套的数组对象字段

问题分析 #

你的代码存在两个核心错误：

• 合成事件异步访问失效：React的合成事件会被自动回收，setMealData的更新回调是异步执行的，此时事件对象已经被重置，在回调内访问e.target.value无法拿到正确值。
• ingredients数组被错误覆盖：当前写法直接将ingredients数组替换为仅包含被修改项的单元素数组，原数组中其他下标的所有项都会丢失。

修正代码 #

const handleIngredients = (e, index) => {
  // 提前取出需要的字段值，避免异步访问事件对象失效
  const { name, value } = e.target
  setMealData((prev) => {
    // 拷贝原ingredients数组，避免修改原状态
    const newIngredients = [...prev.ingredients]
    // 仅修改对应下标的目标项
    newIngredients[index] = {
      ...newIngredients[index],
      [name]: value
    }
    return {
      ...prev,
      ingredients: newIngredients
    }
  })
}

实现说明 #

1. 事件触发后立刻提取name和value，避开合成事件回收的问题
2. 先拷贝完整的ingredients原数组，再仅修改对应下标的项，保留数组中其他所有元素
3. 所有对象修改都通过展开运算符拷贝后更新，满足不可变状态更新的要求，不会修改原有状态。

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