React中setSharedByChecks无法更新状态对象问题排查

问题原因 #

1. 状态引用未变更：let temp = sharedByChecks是引用赋值，temp和sharedByChecks指向同一个对象。你直接修改temp[t]本质是在原状态对象上修改，React无法检测到这种引用未变的状态变更，因此不会触发组件重渲染，状态也无法更新到React DevTools。
2. key值不规范：使用Math.random()作为列表项的key，会导致每次组件重渲染时key都变化，React会重新创建所有列表元素，影响性能且可能引发意外行为，建议改用friend本身（因为participants是字符串数组，每个元素唯一）作为key。

修复方案 #

创建状态对象的副本，修改副本后再更新状态，同时修正key值：

{split.participants.map(friend => {
  return <div key={friend} className="form-check my-2 d-flex align-items-center justify-content-between">
      <div className='d-flex align-items-center'>
          <FormControlLabel 
            control={<Checkbox 
              onChange={(e) => {
                // 用扩展运算符创建原状态的副本
                const temp = {...sharedByChecks};
                temp[friend] = !temp[friend];
                console.log("temp:", temp);
                setSharedByChecks(temp);
              }} 
              checked={sharedByChecks[friend]} 
            />} 
            label={friend} 
          />
      </div>
  </div>
})}

也可以用Object.assign创建副本：

const temp = Object.assign({}, sharedByChecks);

修改后，每次更新状态都传入新的对象引用，React能正确检测到状态变化，触发组件重渲染，复选框的选中状态即可正常切换。

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