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

Question

所以我一直在做 React-Native 几个月了，我偶然发现了一个很大的块必须在 setState function 中更新的情况。 之后我不得不调用 function，这取决于 state。 当然，state 并没有立即发生变异，因为我了解到 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 等待 promise 时才有效......对吗？ 所以按照这个逻辑，在上述代码中，await 和 async 应该对程序没有影响。

非盟

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

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

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

另外：Promise 没有效果。

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

Answer 1

1. 等待您的示例无法按预期工作，因为 stateSetter 未返回 promise

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

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

2. 看看这个关于这里发生了什么的很好的解释

Answer 2

tl;dr：因为您正在使用await ，所以 function 的 rest 计划在未来执行，届时 Z9ED39E2EA931586B6A985A6942EF573E 将被更新。 您是否真的await promise 无关紧要。

---

我不知道 React 的内部结构，但我假设队列是一个微任务来更新 state。 Promise 回调也作为微任务处理（并且async/await只是使用 Promise 的好方法）。

所以首先 React 添加了一个微任务来更新 state，然后await添加了一个微任务来恢复 function。

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

 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>

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

然后执行 function 的其余部分，由于 state 已经更新，它将访问新的 state。

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