React Hooks useState中如何将对象合并到对象数组的指定元素内

你可以通过React State的函数式更新结合数组map方法完成需求，示例代码如下：

setData1(prev => {
  return prev.map(item => {
    if (item.orderID === orderID) {
      // 匹配到对应orderID的对象时，合并data2的所有属性
      return { ...item, ...data2 }
    }
    // 非目标对象直接返回
    return item
  })
})

实现说明 #

• 使用函数式更新可以获取data1的最新值，规避闭包导致获取旧state的问题
• map方法会生成全新的数组，不会直接修改原state，符合React不可变更新的要求
• 对象扩展运算符...会合并两个对象的属性，也不会修改原有item和data2的原始值，如果data2中存在和目标对象重名的属性，会默认覆盖原对象的对应属性值

如果需要添加边界判断避免无效更新，可以使用以下优化写法：

setData1(prev => {
  // 不存在匹配的orderID或data2为空时直接返回原数组，不触发更新
  const hasTarget = prev.some(item => item.orderID === orderID)
  if (!hasTarget || !Object.keys(data2).length) return prev

  return prev.map(item => 
    item.orderID === orderID ? { ...item, ...data2 } : item
  )
})

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