javascript - 在 await 之后调用 setState 时状态立即可用

Question

在等待另一个函数并将状态记录到控制台后调用 setState - 该值立即可用。

我知道 setState 是异步的，在所有其他情况下，它不会在调用后立即可用(但会在 setState 回调中可用)

在没有等待的情况下使用(预期)

// inital value state is 0
const response = fetchSomething()
this.setState({
  value: 5
})

console.log(this.state.value) // prints 0

与等待一起使用

// inital value state is 0
const response = await fetchSomething()
this.setState({
  value: 5
})

console.log(this.state.value) // prints 5

我在这里错过了什么？

Answer 1

当你制作一个函数 async 并且你 await 一些表达式时，下面的语句将在等待的 promise 在幕后得到解决后运行。

文档指出 setState() does not always immediately update the component ，通常不会，但在这种情况下，当您在事件处理程序中解决 promise 后更新状态时，状态会立即更新。

示例

class App extends React.Component {
  state = {
    value: 0
  };

  asyncClick = () => {
    Promise.resolve().then(() => {
      this.setState({
        value: 5
      });

      console.log(this.state.value);
    });
  };

  syncClick = () => {
    this.setState({
      value: 5
    });

    console.log(this.state.value);
  };

  render() {
    return (
      <div>
        <div>{this.state.value}</div>
        <button onClick={this.asyncClick}>Async click</button>
        <button onClick={this.syncClick}>Sync click</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>