React+Material UI中useState致CheckBox联动异常、重复渲染Bug

问题表现 #

• 选择数值N后，带复选框的业务组件会对应渲染N个独立实例
• 点击任意一个实例内的复选框，其余所有实例的对应复选框会同步切换选中状态，不符合预期

排查顺序 #

• 先查复选框属性配置：如果循环渲染时所有复选框都用了完全相同的固定id或name属性，浏览器会默认将同标识的表单控件归为同一组，很容易触发联动选中，这个是原生表单场景下最高发的诱因
• 再查状态绑定逻辑：如果所有组件实例的复选框都绑定了同一个全局状态，或者绑定的状态字段没有加实例唯一标识做区分，修改一个实例的选中值时，所有实例都会读取到同一个更新后的状态，自然会同步变化
• 接着查列表渲染的key配置：如果用框架（React/Vue等）循环渲染N个组件时，给每一项传的key是数组索引、甚至存在重复key，框架做虚拟DOM diff时会出现组件实例状态复用错乱，导致多个实例共享同一份内部状态
• 最后查事件回调的作用域：如果复选框的change事件回调存在闭包问题，捕获了错误的作用域变量，会导致更新操作指向错误的状态引用，触发非预期的批量更新

修复方案 #

• 每个组件实例渲染时分配唯一标识（可以用自增ID、数值+索引的组合值等），实例内所有复选框的id、name、绑定的状态字段都拼接这个唯一标识做实例隔离，参考写法：

// 错误写法：所有实例复选框属性完全一致
<input type="checkbox" name="selectItem" onChange={handleCheck} />

// 正确写法：拼接实例唯一标识做隔离
<input type="checkbox" name={`selectItem_${instanceUid}`} onChange={(e) => handleCheck(instanceUid, e.target.checked)} />

• 循环渲染组件列表时，不要用数组索引作为key值，优先用数据自带的唯一ID、或者实例初始化时生成的唯一ID作为key，避免框架diff时错误复用其他实例的状态
• 调整状态存储结构，不要用单个布尔值存储所有复选框的选中态，改成按实例唯一标识分组的映射结构存储，参考写法：

// 错误写法：所有实例共享同一个选中状态
const [isChecked, setIsChecked] = useState(false)

// 正确写法：按实例ID分组存储各实例的选中态
const [checkedMap, setCheckedMap] = useState({})
const handleCheck = (instanceUid, checkedValue) => {
  setCheckedMap(prev => ({...prev, [instanceUid]: checkedValue}))
}

• 如果使用第三方封装的复选框组件，先确认组件是否默认开启了同name分组逻辑，给不同实例的同功能复选框传入不同的分组标识，切断跨实例的联动关联

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