javascript - 在 React 中调用 Promise 内的异步函数

Question

我正在 React 中开发一个应用程序。它有一个简单的搜索框，在提交时，我调用 api1，它返回一个数据数组。对于数组中的每个项目，我需要调用 api2 - 这应该是异步的。目前的代码是这样的:

onSubmit() { 
    api1(textboxvalue).then(data => { 
        let currentComponent = this      
        if(data matches condition1) {
        currentComponent.state.arrayOfElements1.push(data);
        }               

        if(data matches condition2) {
        currentComponent.state.arrayOfElements2.push(data);
        }               

        const arrayOfElements1 = this.state.arrayOfElements1
        arrayOfElements1.map(function (element) {
        api2(element) -> set this.state.data1loaded

        })

        const arrayOfElements2 = this.state.arrayOfElements2
        arrayOfElements2.map(function (element) {
        api2(element) -> set this.state.data2loaded

    })

}

要求是异步检查渲染中的 data1loaded 和 data2loaded 状态。但是上面的代码，只有在api1的promise完成之后才会调用render

有什么想法吗？

Answer 1

@amirKovacevic 是完全正确的。你永远不应该直接改变状态:https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly

我不完全理解你的代码，但我想你想做这样的事情:

onSubmit() {
  api1(textboxvalue).then(data => {
    if(/* data matches condition1 */) {
      this.setState(prevState => ({
        arrayOfElements1: [...prevState.arrayOfElements1, data]
      }), () => {
        const requests1 = Promise.all(this.state.arrayOfElements1.map(function 
          (element) {
            return api2(element)
          })).then(data => this.setState({ data1loaded: true })) // I assume you want to have an indication loading was complete
      })
    }
  })
}

请注意，我因为没有使用 async/await 而陷入了回调 hell 。另请注意我使用了 setState 回调:https://reactjs.org/docs/react-component.html#setstate

设置状态是异步的，因此您不应该在使用 setState 后直接使用它，至少如果您想获得新值，则不应该。

此外，我的示例仅适用于第一个元素数组。

哦，我是 SO 的新手，如果有什么不符合通常的 SO 评论标准，我很抱歉。 :)