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 都返回一个全新引用的数组，并且其中被修改项也使用新对象（若需深不可变）。对于本例（仅切换布尔值），只需浅层克隆数组即可：
审查 React Router 代码，确保数据加载、变更、错误处理和导航模式符合规范，适用于 React Router v6.4+ 代码、加载器及其他特性。
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={product.active}
onChange={() => productChecked(index)} // 推荐用 onChange 而非 onClick 处理 checkbox
/>⚠️ 注意事项：
- 永远不要在 setState 回调中 mutate 原状态（如 push、splice、直接赋值属性）；
- 使用 map 替代手动索引操作更安全（尤其配合 key）；
- 若状态结构嵌套更深，考虑使用 Immer 库简化不可变更新。
遵循不可变更新原则，你的列表将实时响应交互，useEffect([products]) 也会如期执行，控制台日志清晰可见——这是构建可靠 React 数据流的基石。
