antd Switch等组件根据后端返回值设置defaulChecked，经过一次查询后状态混乱。

转自https://blog.csdn.net/weixin_43859703/article/details/109826671

checkedChildren="改为停用"

unCheckedChildren="改为启用"

checked={record['status'] === 1}

 

其中defaultChecked为后端返回值，但是此值不生效。

 

解决方法一：
不设置defaultChecked，设置checked，但是需要根据后端返回值手动更新checked值

解决方法二：

给Switch设置一个key值，值与defaultChecked一致

<Switch
onChange={showQrCode}
key={!!defaultCompanyStatus.qrCodeStatus}
defaultChecked={!!defaultCompanyStatus.qrCodeStatus}
>
</Switch>

原因：

defaultChecked只在初始设置有效，只能设置一次，刷新页面请求数据时，接口还没有返回值，此时就已经设置了defaultChecked为undefined了，接口返回数据时虽然数据改了，但是defaultChecked并不会更改了
如果设置了一个key值，当key值发生变化时，React遍历dom时，会发现key值发生了变化，进而触发组件渲染，更新组件后defaultChecked就会发生变化