如何更新React中对象数组类型的State：id存在则更新，不存在则追加

问题排查 #

• 核心问题：代码仅实现了未匹配到对应rowID对象时的追加逻辑，当已存在匹配对象时，没有调用setState执行更新操作，自然不会触发状态变更
• 匹配逻辑不一致：查找对象时用的判断条件是product.rowID == index，但最终构造的payload中rowID取值为id，如果index和id不是同一个值，会出现匹配错误
• 逻辑顺序不合理：要写入的payload定义在判断逻辑之后，就算补全更新逻辑也拿不到正确的新值
• 冗余判断与非严格比较：useState初始值已经是空数组，不需要加state &&的冗余判断；比较rowID用的非严格相等==可能因类型不一致出现匹配错误，建议换成严格相等===

修正后实现 #

const [state, setState] = React.useState([]);

// 先构造要写入的最新对象
// 若运行环境不支持可选链?.，可以换回你原来的 a && a.b 写法
const payload = {
  quantity: quantityRef.current?.value,
  name: product?.NAME,
  unit: product?.UNIT,
  PRICE: product?.PRICE,
  oldQuantity: oldQuantity,
  rowID: id,
};

setState(prevState => {
  // 查找同rowID对象的索引
  const existingIndex = prevState.findIndex(product => product.rowID === id);
  if (existingIndex === -1) {
    // 不存在则追加新对象
    return [...prevState, payload];
  }
  // 存在则替换对应位置的对象，遵循React不可变更新原则
  const newState = [...prevState];
  newState[existingIndex] = payload;
  return newState;
})

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