React项目中ToggleSwitch组件checked必填属性未定义报错求助

报错核心是未给ToggleSwitch组件传入必填的checked属性，同时当前状态结构无法支持多个开关的独立状态控制，所有开关共用同一个状态值导致逻辑混乱。以下是具体修复步骤：

1. 初始化每个开关的独立状态 #

将单一状态改为以数组key为标识的对象，确保每个开关有专属状态：

// 根据数据源arr的key初始化每个开关的默认状态
const initialChecked = {};
Object.keys(arr).forEach(key => {
  initialChecked[key] = true; // 可根据需求修改默认选中状态
});

let [isChecked, setIsChecked] = useState(initialChecked);

2. 修改状态更新逻辑 #

更新对应开关的状态时，保留其他开关的状态值，避免覆盖整个状态对象：

const handleSwitchChange = (event, key) => {
  setIsChecked(prevState => ({
    ...prevState,
    [key]: event.target.checked
  }));
};

3. 渲染组件时传入必填的checked属性 #

给每个开关绑定对应key的状态值，同时移除冲突的defaultChecked（受控组件只需checked+onChange）：

Object.keys(arr).map((key) => (
  <ToggleSwitch
    className='onFunc'
    checked={isChecked[key]} // 传入必填的checked属性
    onChange={(e) => handleSwitchChange(e, key)}
    name={`fun[${key}]`}
    id={`on_${key}`}
    optionLabels={["On", "Off"]}
    value={isChecked[key] ? 'y' : 'n'}
    key={key} // 添加唯一key避免React警告
  />
))

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