React checkbox - Onchange 复选框，第一次未定义

Posted 2023-02-19

【中文标题】React checkbox - Onchange 复选框，第一次未定义

【英文标题】：React checkbox - Onchange checkbox, coming undefined for 1st time

【发布时间】：2020-10-06 23:02:24

【问题描述】：

React 复选框 - Onchange 输出未定义为第一次单击（时间）。之后显示有效的真假输出。我用谷歌搜索了这个问题，但没有解决问题。

请帮忙，我在这里做错了什么。

我在State中将checked定义为false：

  constructor() 
        super();
        this.state = 
         formFields: 
            checked: false,
          ,
        ;
      

处理复选框：

handleCheckBox = (e) => 
    this.setState( checked: !this.state.checked );
    console.log("checked", this.state.checked);
    // this.setState( checked: !this.state.formFields.checked );
    // console.log("checked", this.state.formFields.checked);
  ;

解构：

const  ...formFields  = this.state;

在表单中的复选框输入如下：

<input
     type="checkbox"
     checked=formFields.checked
     onChange=this.handleCheckBox
 />

第一次检查输出如下：

【问题讨论】：

您正在记录 this.state.checked 在您的示例中。您应该退出 this.state.formFields.checked。我认为这只是一个错字。所以你最初没有在你的状态下定义this.state.checked

@DevStormUK，是的，我都检查了。如果您在代码中看到我评论了 this.state.formFields.checked。两者都给出相同的输出。谢谢

【参考方案1】：

这是因为setState 异步工作。要在 setState 函数中将 console.log 作为回调传递给您想要的行为：

this.setState(
      checked: !this.state.checked , 
     () => console.log(this.state.checked)
);

回调将在状态更新后被调用。通过在回调之外调用 console.log()，javascript 将在状态更新之前运行 console.log。

这是因为无论如何，在进行任何异步调用之前都必须清除当前调用堆栈。

在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Glossary/Call_stack#:~:text=A%20call%20stack%20is%20a,from%20within%20that%20function%2C%20etc。

【讨论】：

我接受你的回答。仍然警告即将到来。谢谢

首先，你解构不正确 const ...formFields = this.state;将其更改为 const formFields = this.state。其次，formFields 没有更新。删除 formFields 并在构造函数中将其更改为 checked: false 。然后checked=this.state.checked