React.useState更新后Ant Design Switch状态未同步如何解决？

你当前的问题是Switch组件使用了非受控模式，导致外部更新的checked变量无法同步到组件状态上。具体来说，你用了defaultChecked属性，这个属性只会在组件初始化时生效，后续外部状态变化不会影响组件自身的状态。要解决这个问题，需要把Switch改成受控组件，让它的状态完全由我们的checked state来控制。

修改步骤： #

• 移除Switch的defaultChecked属性，改用checked={checked}绑定我们的状态变量，这样组件会实时响应checked的变化。
• 更新AntdOnChange函数，在用户手动切换Switch时同步更新checked状态，保证用户操作也能同步到state中。
• 保留表单提交时的逻辑，确保提交文本后能根据长度正确更新Switch状态。

修改后的完整代码： #

import "./styles.css";
import * as React from "react";
import { Switch } from "antd";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();

  const [checked, setChecked] = React.useState(false);

  const onSubmit = (data: { text: string }) => {
    const length = data.text.length;
    setChecked(length > 5);
  };

  const AntdOnChange = (newChecked: boolean) => {
    console.log(`switch to ${newChecked}`);
    setChecked(newChecked);
  };

  React.useEffect(() => {
    AntdOnChange(checked);
  }, [checked]);

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label htmlFor="text">Text</label>
          <input id="text" placeholder="text" {...register("text")} />
        </div>
        <button type="submit">Submit</button>
      </form>

      <Switch
        checkedChildren="ON"
        unCheckedChildren="OFF"
        checked={checked}
        onChange={AntdOnChange}
      />
    </div>
  );
}

关键改动说明： #

1. 受控绑定：checked={checked}让Switch的状态完全依赖我们的state，每当checked变化，组件就会更新显示状态。
2. 同步用户操作：在AntdOnChange里调用setChecked(newChecked)，这样用户手动点击Switch时，state也会跟着更新，避免状态不一致。
3. 简化提交逻辑：把表单提交里的条件判断简化成setChecked(length > 5)，效果和原来一致但更简洁。

这样修改后，无论是表单提交更新checked，还是用户手动切换Switch，两者的状态都会保持同步。

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