Ant Design组件替换：Checkbox改Switch后报错无法读取checked属性

问题场景 #

原本使用Ant Design的Checkbox组件实现评论发布勾选功能，代码运行正常：

<Checkbox
  key={record.id}
  checked={Publish[record?.id]?.["ispublish"] == 'true' ? true : false}
  onChange={(e) => Update(e.target.checked, record)}
/> 

替换为Switch组件后，代码如下：

<Switch
  key={record.id}
  checked={Publish[record?.id]?.["ispublish"] == 'true' ? true : false}
  onChange={(e) => Update(e.target.checked, record)}
/> 

出现错误：

cannot read properties of undefined (reading 'checked')

错误原因 #

Ant Design的Checkbox与Switch组件的onChange回调参数格式不同：

• Checkbox的onChange回调传入的是事件对象，需要通过e.target.checked获取选中状态
• Switch的onChange回调直接传入的是当前的布尔值状态，并非事件对象，因此访问e.target会触发undefined错误

解决方法 #

修改onChange的参数处理逻辑，直接使用回调返回的布尔值：

<Switch
  key={record.id}
  checked={Publish[record?.id]?.["ispublish"] == 'true' ? true : false}
  onChange={(checked) => Update(checked, record)}
/> 

另外，checked属性的判断可以简化为更直观的写法：

checked={Publish[record?.id]?.ispublish === 'true'}

（因为=== 'true'本身会返回布尔值，无需额外三元判断）

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