此异步等待不应该工作。为什么它会起作用？

Question

所以我已经做了几个月的 React-Native 了，我偶然发现了一个很大的块必须在 setState 函数中更新的情况。之后我不得不调用一个依赖于该状态的函数。 当然，状态并没有立即发生变化，因为我了解到 setState 是异步的。

这是我的结构

父母

stateSetter = (data) => {
        this.setState({
            ...data
        })
    }

dateFilter = () => {
        let startDate = this.state.startDate
        let endDate = this.state.endDate
        if (startDate !== "" && endDate == "") {
            this.setState({
                DataFiltered: this.state.Data.filter(elem => Helper.convertDateToISO(elem.date)>= Helper.convertDateToISO(startDate))
            })
        }else if(startDate == "" && endDate !== ""){
            this.setState({
                DataFiltered: this.state.Data.filter(elem => Helper.convertDateToISO(elem.date)<= Helper.convertDateToISO(endDate))
            })
        }else if(startDate !== "" && endDate !== ""){
            this.setState({
                DataFiltered: this.state.Data.filter(elem => Helper.convertDateToISO(elem.date)>= Helper.convertDateToISO(startDate) && Helper.convertDateToISO(elem.date)<= Helper.convertDateToISO(endDate))
            })
        }else if(startDate === "" && endDate === ""){
            this.setState({
                DataFiltered: this.state.Data
            })
        }
    }

孩子

<TouchableWithoutFeedback onPress={async () => {
                await stateSetter({
                    ["startDate"]: "",
                    ["endDate"]: "",
                    ["startDateText"]: "From...",
                    ["endDateText"]: "To..."
                })
                dateFilter()
            }} >

现在我相信 Async Await 仅在 await 等待承诺时才起作用.....对吗？ 所以按照这个逻辑，在上述代码中，await 和 async 应该对程序没有影响。

完全相反

当我不使用异步等待时，它不起作用。它仅在我使用异步等待时才有效。

当我刚刚学习异步时，我尝试了几件事，但都没有奏效。

this.setState({ ...data }, () => {
  this.dateFilter()
})
//Had no effect

另外：承诺没有效果。

TlDr：为什么我的 Async Await 工作正常？

Answer 1

tl;dr：因为您使用的是await，所以该函数的其余部分计划在将来执行，并且在那个时间点状态将已更新。不管你是否真的 await 承诺是无关紧要的。

---

我不知道 React 的内部结构，但我假设队列是 micro task 来更新状态。 Promise 回调也作为微任务处理（async/await 只是处理 Promise 的好方法）。

所以首先React添加了一个微任务来更新状态，然后await添加了一个微任务来恢复功能。

我们实际上可以做一个简单的实验，通过将回调传递给setState 来验证事件的顺序（没有 JSX，因为不知何故我无法使它成为一个工作的 sn-p）：

class Component extends React.Component {
  async doStuff() {
    await this.setState({newState: true}, () => console.log('inside setState callback', JSON.stringify(this.state)));
    console.log('after await this.setState', JSON.stringify(this.state));
  }
  
  render() {
    return React.createElement('button', {onClick: () => this.doStuff()}, 'Click me');
  }
}

ReactDOM.render(
  React.createElement(Component),
  document.body
);

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

如果你运行它，你会看到回调首先被调用。我们知道此时状态已经更新，因为这就是回调的全部目的：它在状态更新时执行。

然后函数的其余部分被执行，由于状态已经更新，它将访问新的状态。

但是，由于您想知道为什么这样做有效，我建议您不要这样做，而只需使用 setState 回调。

Answer 2

1. await ins 您的示例将无法按预期工作，因为 stateSetter 未返回承诺

要使等待适用于 stateSetter，它必须返回一个 Promise

stateSetter = (data) => {
   return new Promise(resolve => setTimeout(resolve, 3000));
}

1. 看看这个很好的explanation 了解这里发生了什么