等待不是在 JavaScript、React 中等待

Question

我正在努力理解以下案例。 这是我在这里的解释：

1. 一旦 getRegions() 被执行（有一个 API 调用），那么数据将从响应中获取。

2. 状态将设置为首先等待然后才设置。

3. Console.log 应该注销State is + the data来自区域State is + the data 。

    handleRegion = async (e) => { const { data } = getRegions(e.target.value) .then(function (done) { console.log("done"); }) .catch(function (error) { console.log("error"); }); await this.setState({ region: data }); console.log("state is: " + this.state.region); };

取而代之的是，它首先执行的State is: undefiened ，然后才State is: undefiened完成。

理想情况下，我希望将代码编写为：

  handleRegion = async (e) => {
    const { data } = await getRegions(e.target.value)         
    await this.setState({ region: data });
  };

该事件来自 DDL 列表

 <select
                        className="form-control optiontpicker option-design"
                        name="area"
                        onChange={this.handleRegion}
                      >

所以每次 DDL 被改变时，这个函数都应该按这个顺序执行。

Answer 1

你做错了两件事 1. 你没有在getRegions之前添加await 。 和 2. 您在setState之前添加了await 。 为什么这两件事是错误的？ SetState是异步的，但它不返回承诺。 Await仅适用于承诺。

handleRegion = async (e) => {
   const { data } = await getRegions(e.target.value)
       console.log("done");
   this.setState({ region: data },()=>{
        console.log("state is: " + this.state.region);
});
 
 };

Answer 2

setState是异步的，但实际上不是Promise 。 所以你不能同时使用await和setState 。 您必须改用callback ，或承诺setState与await一起使用。

handleRegion = async (e) => {
   const { data } = await getRegions(e.target.value)         
   this.setState({ region: data }, () => {
     console.log("state is: " + this.state.region);
   });
 };```

Answer 3

setState本质上是异步的，但它不返回承诺。 相反，如果您将其作为参数提供，它会调用您的回调。

当您编写理想情况下希望将await与它一起使用时，您可以按如下方式承诺setState ：

promiseState = newState => 
    new Promise(resolve => this.setState(newState, resolve));

然后你可以编写如下代码：

handleRegion = async (e) => {
    const { data } = await getRegions(e.target.value)         
    await promiseState({ region: data });
};