Question

我正在学习React，实际上不理解为什么当我单击带有click事件的按钮时，状态不会立即改变。我的意思是，我创建了一个状态“ test：false”，但是当我单击按钮时，我只想更改状态，所以我使用了setState。但是，当我第一次单击时，控制台仍显示“ false”。

Here's a Codesandbox to illustrate my example.

(AND: 'a_filter__in': ['a', 'b', 'c'), (OR: (AND: ), (AND:('x':True, 'y':True, 'z':True))

我也想在状态为true时显示“ Hello”，在状态为false时显示“再见”。有人可以帮我吗？

Answer 1

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

由于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>
    );
  }

Answer 2

使显示异步功能，并且您也可以使用es6来实现功能减速，但这不是强制性的

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

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

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

为什么使用setState在点击事件中我的状态不会改变

2 个答案: