React 的 useState 要求状态更新必须基于不可变数据原则；直接修改原数组元素（如 prevState[index].active = ...）不会触发重渲染，因为 React 浅比较发现引用未变。

react 的 usestate 要求状态更新必须基于不可变数据原则；直接修改原数组元素（如 `prevstate[index].active = ...`）不会触发重渲染，因为 react 浅比较发现引用未变。

在使用 useState 管理数组类状态（如产品列表 products）时，一个常见却隐蔽的错误是：在更新状态回调中直接修改原数组或其内部对象，而非创建新副本。这会导致 React 无法检测到状态变化，从而跳过重渲染——即使 setProducts 被调用，useEffect 监听 products 也无响应，DOM 保持静止。

根本原因在于：React 通过浅比较（shallow comparison）判断状态是否变化。当你写：

const newState = prevState; // ❌ 引用相同！
newState[index].active = !newState[index].active;
return newState;

newState 和 prevState 指向同一数组对象，数组引用未变；即使某项 active 值变了，React 仍认为“状态没更新”，因此不触发组件重绘。

✅ 正确做法是：确保每次 setProducts 都返回一个全新引用的数组，并且其中被修改项也使用新对象（若需深不可变）。对于本例（仅切换布尔值），只需浅层克隆数组即可：

Dagre React Flow

使用 dagre 与 React Flow (@xyflow/react) 实现自动图布局。适用于自动布局、层级布局、树形结构或节点排列等场景。

下载

const productChecked = (index) => {
  setProducts((prevState) => {
    const newProducts = [...prevState]; // ✅ 创建新数组（浅拷贝）
    newProducts[index] = {
      ...newProducts[index], // ✅ 创建新对象，避免直接修改原对象
      active: !newProducts[index].active
    };
    return newProducts;
  });
};

? 为什么推荐 ...newProducts[index]？
即使 product 是简单对象，直接赋值 newProducts[index].active = ... 仍会修改原对象属性（引用未变）。使用展开语法可生成新对象，保证该行数据的不可变性，符合 React 最佳实践。

同时，请修正 JSX 中的 checked 属性逻辑：当前 checked={!product.active} 表示勾选态与 active 取反，易引发语义混淆。建议统一为：

<input type="checkbox" checked onchange="{()"> productChecked(index)} // 推荐用 onChange 而非 onClick 处理 checkbox
/>

⚠️ 注意事项：

• 永远不要在 setState 回调中 mutate 原状态（如 push、splice、直接赋值属性）；
• 使用 map 替代手动索引操作更安全（尤其配合 key）；
• 若状态结构嵌套更深，考虑使用 Immer 库简化不可变更新。

遵循不可变更新原则，你的列表将实时响应交互，useEffect([products]) 也会如期执行，控制台日志清晰可见——这是构建可靠 React 数据流的基石。