Switch不根据React.useState变化

Question

在这个简单的"in CodeSandbox: https://codesandbox.io/s/cool-fast-fi426k?file=/src/App.tsx

您可以看到checked实际上根据外部条件(输入的文本长度)发生了变化，但这并没有"物理地"改变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();

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

const onSubmit = (data: string) => {
console.log("data.text: ", data.text);
let length = data.text.length;
console.log("data.text.length: ", length);
if (length > 5) {
console.log("'checked' variable has to be set as TRUE");
setChecked((checked) => true);
} else {
console.log("'checked' variable has to be set as FALSE");
setChecked((checked) => false);
}
};

const AntdOnChange = (checked) => {
console.log(`switch to ${checked}`);
};

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"
defaultChecked
onChange={AntdOnChange}
/>
</div>
);
}

如何将正确更改的被检查变量值传递到Switch状态?

Answer 1

你可以通过做三件事来达到这个目的

1. 删除更新选中状态的useEffect。如果你将状态传递给switch组件，它将导致多次渲染，从而导致错误

2. 在交换机组件中执行此操作。我已经添加了checked道具

<Switch
checkedChildren="ON"
unCheckedChildren="OFF"
defaultChecked
checked={checked} 
onChange={AntdOnChange}
/>

3. 在您的AntdOnChange函数中，这样做。此函数将独立于输入
中添加的任何内容。

const AntdOnChange = (checked) => {
setChecked((checked) => !checked);
};