在等待之后调用setState时，状态立即可用
在等待之后调用setState时，状态立即可用
提问于 2019-04-12 20:08:53
在等待另一个函数并将状态记录到控制台后调用setState时，该值立即可用。
我知道setState是异步的，在所有其他情况下，它不会在调用它之后立即可用(但可以在setState回调中使用)
在不等待的情况下使用时(预期)
// inital value state is 0
const response = fetchSomething()
this.setState({
value: 5
})
console.log(this.state.value) // prints 0与await连用
// inital value state is 0
const response = await fetchSomething()
this.setState({
value: 5
})
console.log(this.state.value) // prints 5这里我漏掉了什么？
回答 1
Stack Overflow用户
发布于 2019-04-12 20:20:45
当你创建了一个函数async并且你await了一些表达式，在等待的promise在幕后被解析之后，下面的语句将会运行。
文档中声明了setState() does not 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55651303
复制相关文章
相似问题
腾讯云开发者
