React - 复选框第一次返回未定义的值

Question

我有一个功能组件，我试图从复选框输入中获取值，但即使我设置了初始状态，从控制台获得的第一个值也是未定义的。在我第二次单击后，它才开始从状态检索值。

const Preferences = () => {

    const [pref, setPref] = useState({
        webcam: true
    });


    const onChange = e => {

        setPref({ ...pref, [e.target.name]: e.target.checked });

        console.log(webcam); //always undefined on first time
    };

...

<input
    type="checkbox"
    name="webcam"
    value={webcam}
    onChange={onChange}
    defaultChecked={webcam}
/>

Answer 1

第一次它是未定义的，因为您的状态是perf用 property命名的webcam。

将值作为 props 传递时正确访问状态属性。

<input
    type="checkbox"
    name="webcam"
    value={perf.webcam}
    onChange={onChange}
    defaultChecked={perf.webcam}
/>

此外，尝试在排队更新后直接控制台日志状态是行不通的，因为反应状态更新本质上是异步的，并且发生在渲染周期之间，即它只是记录当前渲染周期中的状态值。使用效果来记录更新的状态值。

此外，由于反应状态更新和可为空的合成事件的异步性质，您可能希望获取事件的name和checked值，以便在处理状态更新之前事件不会被取消并返回到事件池。

const Preferences = () => {

    const [pref, setPref] = useState({
        webcam: true
    });

    useEffect(() => {
        console.log(perf.webcam);
    }, [perf]);

    const onChange = e => {
        const { checked, name } = e.target;
        setPref({ ...pref, [name]: checked });
    };

...