ReactJS使用Hooks实现嵌套对象数组新增/更新的代码优化咨询

你现有的实现不仅逻辑偏冗余，还存在两个隐性bug：

1. 匹配到目标parent项时返回数组，会导致parents字段出现嵌套数组的异常结构
2. 所有未匹配的parent项都会被强制更新qty_needed，不符合业务预期

可以通过单次setProductData调用实现需求，优化后的代码如下：

const handledParent = (event, row) => {
  const inputQty = event.target.value;
  // 采用函数式更新避免闭包问题，更符合React最佳实践
  setProductData(prevProductData => {
    const newParents = [...prevProductData.parents];
    const targetIdx = newParents.findIndex(item => item.parent_id === row.id);
    if (targetIdx > -1) {
      // 已存在则仅更新对应项的数量字段
      newParents[targetIdx] = {
        ...newParents[targetIdx],
        qty_needed: inputQty
      };
    } else {
      // 不存在则插入新项
      newParents.push({
        parent_id: row.id,
        parent_product: row.product,
        qty_needed: inputQty
      });
    }
    return {
      ...prevProductData,
      parents: newParents
    };
  });
};

优化说明 #

• 仅做一次数组查找操作，没有冗余遍历，性能优于原有实现
• 单次状态更新调用完成所有逻辑，代码结构更简洁
• 修复了原有实现的逻辑bug，不会误改其他parent项的属性
• 函数式状态更新不依赖外部state，避免异步更新导致的旧值闭包问题

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