Ant Design 组件默认值修改不生效问题

原因

antd 中的多个组件的 default 值只接受一次赋值，后续对 default 值进行了修改也不会生效

分析

1. 首次渲染组件时，各个组件的 default 值可能为 undefined、或初始化值
2. 当在 useEffect hook 中抓取数据后，更新 state 触发组件的重新渲染，但由于各个组件的 default 值已经为 undefined、或初始化值了，所以修改了默认值也不会生效

解决

方式一：将 key 设置为 default 值，当 key 的值改变后，触发重新渲染。因为 React 遍历 dom 时，会根据检测 key 是否改变，若改变则会重新渲染组件，进而使得组件的 default 值生效。
方式二：不使用组件的 default 值属性，将一个受控变量作为组件的值。

演示

案例一

import { Button, Switch } from "antd";
import { useState } from "react";

const User1: React.FC = () => {

    const [defaultChecked, setDefaultChecked] = useState<boolean>(true);
    const [checked, seChecked] = useState<boolean>(true);

    console.log("Default checked: " + defaultChecked);
    console.log("Checked: " + checked);
    
    return <>
        <Switch
            defaultChecked={defaultChecked}
        />

        <Switch
            key={defaultChecked + ""}
            defaultChecked={defaultChecked}
        />

        <Switch
            checked={checked}
        />

        <br/>
        <br/>

        <Button onClick={() => {
            setDefaultChecked(!defaultChecked);
            seChecked(!checked);
        }}>
            Change switch
        </Button>
    </>
}

export default User;
/>

案例二

const User2: React.FC = () => {

    const [defaultChecked, setDefaultChecked] = useState<boolean>(true);
    const [checked, seChecked] = useState<boolean>(true);

    console.log("Default checked: " + defaultChecked);
    console.log("Checked: " + checked);
    
    useEffect(() => {
        // 模拟接口调用
        new Promise<{ apiRes: boolean}>(resolve => {
            resolve({ apiRes: false});
        }).then(reponse => {
            setTimeout(() => {
                setDefaultChecked(reponse.apiRes);
                seChecked(reponse.apiRes);
            }, 2000);
        });
    }, []);

    return <>
        <Switch
            defaultChecked={defaultChecked}
        />

        <Switch
            key={defaultChecked + ""}
            defaultChecked={defaultChecked}
        />

        <Switch
            checked={checked}
        />
    </>
}