React避免状态覆盖：新增商品时保留原有数据的问题

问题根源 #

你之前的代码触发无限循环，核心原因是每次addReq.product更新时，直接把完整的产品列表追加到现有状态后面，导致本地状态持续膨胀；同时每次setState都会生成新数组引用，组件重复渲染，进而再次触发useEffect，形成循环。此外，这种逻辑还会重复添加已有产品，完全不符合需求。

正确实现 #

我们需要通过产品id识别新增项，只将真正的新产品添加到本地状态，同时保留原有产品的remarks值，新增产品的remarks设为空：

const [productsLists, setProductsLists] = useState<Product[]>(addReq.product);

useEffect(() => {
  setProductsLists(prevProducts => {
    // 提取已有产品的id，用Set优化查找性能
    const existingIds = new Set(prevProducts.map(item => item.id));
    // 从addReq.product中筛选出未在本地状态中存在的新产品
    const newProducts = addReq.product.filter(item => !existingIds.has(item.id));
    
    // 无新增产品时直接返回原状态，避免不必要的组件更新
    if (newProducts.length === 0) return prevProducts;
    
    // 处理新产品：将remarks置为空字符串
    const processedNewItems = newProducts.map(item => ({ ...item, remarks: "" }));
    
    // 合并原有产品与处理后的新产品
    return [...prevProducts, ...processedNewItems];
  });
}, [addReq.product]);

关键细节说明 #

1. 基于id去重：用产品的唯一id判断是否为新增项，确保不会重复添加已有产品
2. 避免不必要更新：当没有新增产品时直接返回原状态，不会触发组件重新渲染
3. 性能优化：使用Set存储已有id，将查找操作的时间复杂度从O(n)降到O(1)
4. 状态不可变：始终创建新对象/新数组来更新状态，符合React的状态更新规则

内容的提问来源于stack exchange，提问作者B A N G A T A