<Switch
onChange={showQrCode}
defaultChecked={!!defaultCompanyStatus.qrCodeStatus}
>
</Switch>
其中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就会发生变化
验证:
设置一个key的初始值
const [keyIndex, setKeyIndex] = useState('a');
5秒后key值变化
// 在useEffect中调用
setTimeout(() => {
setKeyIndex('b');
}, 5000);
}, []);
组件更新,defaultChecked被触发
<Switch
key={keyIndex}
onChange={openWelfare}
defaultChecked={!!defaultCompanyStatus.welfareStatus}
>
</Switch>