antd Switch等组件根据后端返回值设置defaulChecked值无效


1
2
3
4
5
         <Switch
            onChange={<!-- -->showQrCode}
            defaultChecked={<!-- -->!!defaultCompanyStatus.qrCodeStatus}
          >
          </Switch>

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

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

解决方法二：

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

1
2
3
4
5
6
        <Switch
            onChange={<!-- -->showQrCode}
            key={<!-- -->!!defaultCompanyStatus.qrCodeStatus}
            defaultChecked={<!-- -->!!defaultCompanyStatus.qrCodeStatus}
          >
          </Switch>

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

验证：
设置一个key的初始值

1
  const [keyIndex, setKeyIndex] = useState('a');

5秒后key值变化

1
2
3
4
5
  // 在useEffect中调用
  setTimeout(() => {<!-- -->
      setKeyIndex('b');
    }, 5000);
  }, []);

组件更新，defaultChecked被触发

1
2
3
4
5
6
        <Switch
            key={<!-- -->keyIndex}
            onChange={<!-- -->openWelfare}
            defaultChecked={<!-- -->!!defaultCompanyStatus.welfareStatus}
          >
          </Switch>