如何使用React Hooks不可变地更新对象数组中的指定属性

正确实现代码 #

直接替换你的onClickHandler为以下写法即可：

const onClickHandler = (id) => {
  setMenuList((prevMenuList) => 
    prevMenuList.map(item => 
      item.id === id 
        ? {...item, amount: item.amount + 1}
        : item
    )
  )
}

实现逻辑说明 #

• 采用你要求的函数式更新写法，传入的prevMenuList是更新前的最新状态值，能避免多轮状态更新冲突
• 用map方法遍历数组，不会修改原有状态数组，符合不可变更新要求
• 匹配到对应id的餐品条目时，通过展开运算符...item拷贝原有属性，仅修改amount字段后返回新对象，不会直接改动原状态对象
• 未匹配到的条目直接原样返回，无需额外改动，性能更优

内容的提问来源于stack exchange，提问作者Amine El were