在等待之后调用 setState 时，状态立即可用

Posted 2023-02-15

【中文标题】在等待之后调用 setState 时，状态立即可用

【英文标题】：state is immediately available when setState is called after await

【发布时间】：2019-09-03 04:47:33

【问题描述】：

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

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

当不使用 await 时（预期）

// 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

我在这里错过了什么？

【参考方案1】：

当你创建一个函数 async 和你 await 某个表达式时，以下语句将在等待的承诺得到解决后运行。

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

示例

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>

【讨论】：

这个解释得很好

更准确地说，“并不总是”取决于 setState 是在组件生命周期内部还是外部调用。更多详情，***.com/a/48610973/3731501