在 react 中使用 usestate 管理产品列表（对象数组）时，若直接修改数组元素属性而不创建新数组引用，会导致状态引用未变、react 跳过重渲染。根本原因在于违反了不可变更新原则。
在 react 中使用 usestate 管理产品列表（对象数组）时，若直接修改数组元素属性而不创建新数组引用，会导致状态引用未变、react 跳过重渲染。根本原因在于违反了不可变更新原则。
React 的 useState 依赖浅比较（shallow comparison）来判断状态是否变化。当 setProducts 接收的回调函数返回的是原数组引用（如 prevState 直接赋值给 newState），即使内部对象属性已更改，React 仍认为状态未更新，从而跳过 DOM 重渲染——这正是你遇到的问题：勾选复选框后界面无响应，且依赖 products 的 useEffect 也未触发。
问题代码中的关键错误在于：
const newState = prevState; // ❌ 错误：引用相同，未创建新数组 newState[index].active = !newState[index].active; return newState;
虽然 product.active 值改变了，但 products 数组的引用地址未变，React 认为“状态没变”，因此不触发重渲染。
✅ 正确做法是：始终返回一个全新的数组引用，同时确保被修改的对象也是新引用（若需深度不可变，但本例中仅切换布尔值，修改对象属性可接受；更推荐完全不可变以避免潜在问题）。推荐写法如下：
const productChecked = (index) => {
setProducts((prevState) => {
// ✅ 创建新数组（浅拷贝），再更新指定索引项
const updatedProducts = [...prevState];
updatedProducts[index] = {
...updatedProducts[index], // 深拷贝当前 product 对象（推荐）
active: !updatedProducts[index].active
};
return updatedProducts;
});
};
这样既保证了数组引用更新，又确保了被修改对象的独立性，兼容后续可能的嵌套状态变更。
同时，请注意 JSX 中复选框的 checked 属性逻辑：你当前写的是 checked={!product.active}，这意味着 active: true 时复选框不勾选，语义易混淆。建议统一语义，例如将字段命名为 isActive 并保持 checked={product.isActive}：
<input type="checkbox" checked true onchange="{()"> productChecked(index)} // 推荐用 onChange 替代 onClick 处理 checkbox
/>
⚠️ 额外提醒：
- 避免在 onClick 中直接调用状态更新函数（尤其无防抖/节流场景），但此处无性能风险；
- useEffect 未执行正是因为 products 引用未变，修复状态更新后，该 effect 将正常触发并输出日志；
- 若产品数据量极大（如数千条），可考虑使用 useReducer 或虚拟滚动优化，但本例中仅需修正不可变更新即可。
总结：React 状态更新必须遵循不可变原则——返回新引用是触发重渲染的前提。对数组使用 [...arr]，对对象使用 {...obj}，是函数式更新中最基础也最关键的实践。
