MUI多Checkbox状态管理：切换标签时勾选状态丢失且仅能单选如何解决

问题根因 #

1. 多选逻辑错误：你声明的isChecked初始值虽然是数组，但实际更新时直接赋值为单个索引，导致同一时间只能记录一个选中项，表现和单选按钮一致。
2. 切换Tab状态丢失：MUI的Tab组件默认会卸载未激活的TabPanel，如果你将isChecked状态定义在TabPanel内部，切换Tab时组件卸载重渲染，状态就会被重置。

调整步骤 #

1. 修复多选逻辑 #

修改状态更新函数，用数组存储所有选中项的索引：

const [isChecked, setIsChecked] = React.useState([]);

const isCheckboxChecked = (index) => {
  setIsChecked(prev => {
    // 已选中则移除，未选中则加入数组
    return prev.includes(index) 
      ? prev.filter(item => item !== index)
      : [...prev, index]
  })
}

修改Checkbox的checked判断逻辑，判断当前索引是否在选中数组中，同时删除重复绑定的触发事件：

<Checkbox
  key={index + checkbox.Name}
  name={checkbox.Name}
  value={checkbox.Weight}
  id={checkbox.Category}
  // 替换原来的isChecked==index
  checked={isChecked.includes(index)}
  color="primary"
  // 你同时绑定了onChange和onClick逻辑重复，保留一个即可
  onClick={() => isCheckboxChecked(index)}
/>

2. 解决切换Tab状态丢失问题 #

二选一即可：

• 方案一：将isChecked状态提升到Tab组件的父级组件中定义，状态不受TabPanel卸载的影响。
• 方案二：给TabPanel添加keepMounted属性，让未激活的Tab面板不被卸载，内部状态自然保留：

<TabPanel value={tabValue} index={0} keepMounted>
  {/* 这里放你的Checkbox列表内容 */}
</TabPanel>

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