相关疑难解决方法(0)

我一直在使用异步等待我的ReactJS项目中的babel.我发现使用React setState很方便,我想更好地理解.考虑以下代码:

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

验证代码仅在handleChange更新状态并呈现新状态后运行.

通常在状态更新后运行代码,您必须在this.setState之后使用回调.这意味着如果你想在handleChange之后运行任何东西,你必须给它一个回调参数,然后传递给setState.不漂亮.但是在代码示例中,await知道在状态更新后,handleChange已经完成了...但我认为await只适用于promises并等待承诺在继续之前解决.在handleChange中没有承诺和解决方案......它怎么知道等待什么？

暗示似乎是setState以异步方式运行,并且await以某种方式知道它何时完成.也许setState在内部使用promises？

版本:

反应:"^ 15.4.2"

babel-core:"^ 6.26.0"

babel-preset-env:"^ 1.6.0",

babel-preset-react:"^ 6.24.1",

babel-preset-stage-0:"^ 6.24.1"

babel-plugin-system-import-transformer:"^ 3.1.0",

babel-plugin-transform-decorators-legacy:"^ 1.3.4",

babel-plugin-transform-runtime:"^ 6.23.0"