Javascript 为什么我的状态不随setState的点击事件而改变

我正在学习如何做出反应，实际上我不明白为什么当我按下一个按钮时，我的状态并没有立即改变，只发生了一次点击事件。我的意思是，我创建了一个状态“test:false”，但是当我点击我的按钮时，我只想更改状态，所以我使用了setState。但当我第一次单击时，控制台仍然显示“false”

从“React”导入React；
导入“/styles.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
测试：错误
};
this.display.bind（this）；
}
显示（）{
这是我的国家({
测试：正确
});
console.log（this.state.test）
}
render（）{
返回(
this.display（）}>单击我！
);
}
}
导出默认应用程序；

如果状态为真，我还想表示“你好”，如果状态为假，则表示“再见”。

---

有人能帮我吗？

我检查了你的代码，发现你在那里出错了

因为setState（）是异步的。处理这个问题的一个简单方法是给它一个回调。 要在

setState（）

之后打印状态，需要使用以下代码：

display() {
 this.setState({
  test: true
 }, console.log(this.state.test));
}

  render() {
    return (
      <div className="App">
        <button onClick={() => this.display()}>Click me!</button>
        {(this.state.test) ? <p>Hello</p> : <p>Bye</p>}

      </div>
    );
  }

关于更新的查询，您需要使用三元运算符，如下所示：

display() {
 this.setState({
  test: true
 }, console.log(this.state.test));
}

  render() {
    return (
      <div className="App">
        <button onClick={() => this.display()}>Click me!</button>
        {(this.state.test) ? <p>Hello</p> : <p>Bye</p>}

      </div>
    );
  }

render（）{
返回(
this.display（）}>单击我！
{（this.state.test）？你好
：再见
}
);
}

我检查了您的代码，发现您在那里出错了

因为setState（）是异步的。处理这个问题的一个简单方法是给它一个回调。 要在

setState（）

之后打印状态，需要使用以下代码：

display() {
 this.setState({
  test: true
 }, console.log(this.state.test));
}

  render() {
    return (
      <div className="App">
        <button onClick={() => this.display()}>Click me!</button>
        {(this.state.test) ? <p>Hello</p> : <p>Bye</p>}

      </div>
    );
  }

关于更新的查询，您需要使用三元运算符，如下所示：

display() {
 this.setState({
  test: true
 }, console.log(this.state.test));
}

  render() {
    return (
      <div className="App">
        <button onClick={() => this.display()}>Click me!</button>
        {(this.state.test) ? <p>Hello</p> : <p>Bye</p>}

      </div>
    );
  }

render（）{
返回(
this.display（）}>单击我！
{（this.state.test）？你好
：再见
}
);
}

使显示成为一个异步功能，您也可以使用es6来实现您的功能，但这不是强制性的

const display = async _ => {
    await this.setState({
      test: !this.state.test
    });
    await console.log(this.state.test)
  }

//现在，您的按钮应该如下所示

<button onClick={_ => display()}>Click me!</button>

display（）}>单击我！

使显示成为一个异步功能，您也可以使用es6来实现您的功能，但这不是强制性的

const display = async _ => {
    await this.setState({
      test: !this.state.test
    });
    await console.log(this.state.test)
  }

//现在，您的按钮应该如下所示

<button onClick={_ => display()}>Click me!</button>

display（）}>单击我！