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

【问题标题】：React checkbox - Onchange checkbox, coming undefined for 1st timeReact checkbox - Onchange 复选框，第一次未定义
【发布时间】：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。两者都给出相同的输出。谢谢

标签： javascript reactjs

【解决方案1】：

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

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

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

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

【讨论】：

我接受你的回答。仍然警告即将到来。谢谢
首先，你解构不正确 const { ...formFields } = this.state;将其更改为 const { formFields } = this.state。其次，formFields 没有更新。删除 formFields 并在构造函数中将其更改为 { checked: false } 。然后checked={this.state.checked}