如何在React Hooks的useState对象数组中更新指定订单ID对应项的属性值

失效原因 #

你写的map遍历更新逻辑本身没有语法错误，没生效通常是以下两个原因：

• React的state更新是异步批量执行的，如果你在调用setmyData之后立刻打印myData，拿到的是更新前的旧值，属于正常现象
• 没有使用函数式更新写法：当更新操作依赖当前state的最新值时，函数式更新可以规避闭包陷阱，保证拿到的是最新的state数据

正确实现代码 #

// 使用函数式更新获取最新的prevMyData
setmyData(prevMyData => prevMyData.map(item => {
  if (item.OrderId === orderID) {
    return { ...item, Amount: item.Amount + AmountToAdd }
  }
  return item
}))

// 要查看更新后的结果，可通过useEffect监听myData变化
useEffect(() => {
  console.log(myData)
}, [myData])

排查建议 #

如果修改后还是达不到预期，可以先排查：

• 确认orderID变量的值和目标对象的OrderId完全一致，无空格、大小写、拼写差异
• 确认代码执行时AmountToAdd的赋值已经完成，不是undefined

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