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

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

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
    };

...

---

它第一次未定义，因为您的州名为

perf

，带有一个属性

网络摄像头

作为道具传递值时正确访问状态属性

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

---

您不是正在从

pref.webcam

访问您的网络摄像头值吗？经过一个小时的搜索，您建议在调用setPref之前退出并命名。。。这解决了我的问题。很好的建议。

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

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 });
    };

...