handleChange = (e) => {
this.setState({[e.target.name]: e.target.value})
console.log('synchronous code')
}
changeAndValidate = async (e) => {
await this.handleChange(e)
console.log('asynchronous validation code')
}
componentDidUpdate() {
console.log('updated component')
}
synchronous code
updated component
asynchronous validation code
https://stackoverflow.com/questions/47019199/why-does-async-await-work-with-react-setstate
1:首先调用 changeAndValidate, 先执行 await this.handleChange(e)右边的方法,log需要等待await执行完毕才执行
2:调用 handleChange方法,先setState,setState是一个异步操作,不会立即执行。然后log,首先输出synchronous code
3:handleChange方法默认返回undefined。方法结束
4: await this.handleChange(e) ,undefined不是一个Promise,所有要转化成Promise.resolve(undefined),Promise异步执行,加入到event loop中,在setState之后.
5:setState执行完毕,执行componentDidUpdate,输出updated component
6:event loop执行到Promise,await完成,输出asynchronous validation code







网友评论