React状态更新疑惑：直接修改state对象为何状态自动变更？

问题核心原因 #

你遇到的情况本质是对React状态不可变性的理解不到位。products是数组（引用类型），products.find(...)返回的是原数组中对应产品对象的引用而非副本。所以你直接修改exitsProduct.description时，已经在篡改products状态里的原数据——哪怕还没调用setProducts，原状态的内容已经发生变化，组件重新渲染时自然会显示更新后的描述。

后续调用setProducts(products)时，因为数组的引用没有改变（还是原来的数组对象），React会判定状态未更新，甚至可能不触发预期的重新渲染，引发UI与状态不一致的隐患。

正确的状态更新方式 #

你写的map方式是标准的正确做法，核心是创建全新的状态副本，绝不修改原状态：

const updatedProducts = products.map((product) => {
  if (product.id === productId) {
    return {
     ...product,
     description: "example desc", // 这里替换为你需要的新描述值
    }
  }
  return product;
});
setProducts(updatedProducts);

这段代码通过map生成新数组，对需要修改的产品用展开运算符...product创建独立的新对象，修改属性后返回，既保证原状态不受影响，又通过新数组的引用变化让React正确识别状态更新，触发组件渲染。

疑问解答 #

1. 这确实是对React状态机制的理解偏差，React要求状态必须是不可变的，直接修改引用类型的状态会绕过React的更新检测逻辑，导致不可预测的UI行为。
2. 将状态复制到新常量可以实现有效更新，但要注意拷贝的层级：
   • 对于简单的扁平对象/数组，浅拷贝（比如展开运算符[...]、{...obj}）就足够；
   • 如果产品对象是嵌套结构，需要用深拷贝（比如JSON.parse(JSON.stringify(obj))，或第三方工具函数），避免修改原对象的嵌套属性。

举个修正后的handleChangeProduct示例：

const handleChangeProduct = async ({ productId }: { productId: number }) => {
  const targetProduct = products.find(({ id }) => id === productId);
  if (!targetProduct) return;
  
  // 创建产品副本并修改描述
  const updatedProduct = { ...targetProduct, description: "example desc" };
  
  const response = await fetch(
    `${process.env.VITE_APP_API_URL}/products/add`,
    {
      method: 'POST',
      body: JSON.stringify(updatedProduct),
    }
  );
  const responseObj = await response.json();
  
  if (responseObj?.success) {
    // 生成新数组更新状态
    const updatedProducts = products.map(p => 
      p.id === productId ? updatedProduct : p
    );
    setProducts(updatedProducts);
  }
} 

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