React中多受控复选框按组件独立维护选中状态的方案问询

问题场景 #

左侧通过map渲染多个带开关的组件，点击开关后，右侧根据当前组件ID渲染一组后端返回的复选框（同样通过map渲染）。切换不同组件时，若新组件的复选框名称与之前组件的复选框名称相同，会出现选中状态串用的情况，需要实现每个组件的复选框选中状态完全独立。

已尝试方案 #

• 给组件传递key，期望组件ID变化时触发重新渲染，无效；
• 将复选框状态移至组件内部可解决状态串用问题，但因需要在父组件共享该状态，此方案不可行；
• 尝试用redux-saga、Context API统一管理状态，问题仍存在；
• 尝试按componentId结构化状态，未解决问题。

问题根源与解决办法 #

经排查，问题出在SideBar组件中复选框的checked属性判断逻辑错误：

• 错误写法：checked={checkedItems[v.bow_name] || false}
  该写法仅通过复选框名称作为状态键，未关联当前组件的ID，导致不同组件的同名复选框共用同一个状态值，引发状态串用。
• 正确写法：checked={checkedItems[assignmentId]?.checkboxes[v.bow_name] || false}
  通过当前组件的assignmentId（即组件ID）来结构化状态，将每个组件的复选框状态单独存储在对应ID的对象下，确保不同组件的复选框状态独立读取和更新。

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