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

Question

React 复选框 - 第一次点击(时间)将输出更改为未定义。之后显示有效的 true 或 false 输出。我用谷歌搜索了这个问题，但没有解决问题。

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

我在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;

在表单checkbox中输入如下:

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

第一次检查输出如下:

Answer 1

这是因为 setState 是异步工作的。要获得您想要的行为，请将 console.log 作为回调传递给 setState 函数:

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 .