React点击同一复选框两次无渲染更新问题排查求助

问题根因 #

你的问题出在handleCheckboxChange函数中对productsState的更新不符合React状态更新的规范：

• React的useState对引用类型数据会做浅比较，只有检测到引用发生变化时才会触发组件重渲染
• 你当前的写法let checkboxList = productsState是直接把原状态数组的引用赋值给新变量，后续修改数组内对象属性后传给setProductsState的还是同一个数组引用，React会认为状态没有发生变化

为什么会出现点击不同复选框正常、重复点击同一个不更新的现象？ #

因为你在函数里同时调用了setSelectedValue(e.target.value)：

• 首次点击/点击不同复选框时，selectedValue的值发生变化，会触发组件重渲染，顺便把productsState的修改渲染出来
• 重复点击同一个复选框时，e.target.value和当前selectedValue的值相同，setSelectedValue不会触发重渲染，同时productsState引用无变化，因此组件不会更新，直到你点击其他复选框修改selectedValue才会批量渲染之前的变更

修复方案 #

修改handleCheckboxChange函数，更新状态时返回新的数组和修改后的新对象即可：

const handleCheckboxChange = (e, product) => {
    setSelectedValue(e.target.value)
    // map返回新数组，修改对应项时展开为新对象
    const newProductsState = productsState.map(item => {
        if(item.name === product.name) {
            return {...item, checked: !item.checked}
        }
        return item
    })
    setProductsState(newProductsState)
}

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