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，属性为webcam。

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

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