React中useState回调更新状态后DOM未重渲染问题求助

问题出在直接修改了React state的引用，React依赖state引用的变化来判断是否需要重新渲染组件。

你的代码里const newState = prevState;只是把原数组的引用赋值给了newState，并没有创建新的数组副本。修改newState[index].active时，本质上是在修改原state数组的元素，数组本身的引用没有改变。React检测不到state的变化，所以不会更新DOM，监听products的useEffect也不会触发。

修复代码 #

需要创建数组的新副本，同时修改对应元素时也要创建该元素的新对象副本（保证不可变性），有两种常见写法：

写法一：扩展运算符+对象解构 #

const productChecked = (index) => { 
    setProducts((prevState) => {
        // 复制原数组得到新数组
        const newState = [...prevState];
        // 复制目标元素并修改active属性
        newState[index] = {
            ...newState[index],
            active: !newState[index].active
        };
        return newState;
    });
};

写法二：使用map方法（更简洁） #

const productChecked = (index) => { 
    setProducts((prevState) => 
        prevState.map((product, i) => 
            i === index ? { ...product, active: !product.active } : product
        )
    );
};

修改后，state的引用发生了变化，React会检测到更新，重新渲染DOM，同时监听products的useEffect也会正常打印日志。

另外确认一下checked={!product.active}的逻辑是否符合你的需求，如果是要让active为true时checkbox选中，改为checked={product.active}即可。

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