javascript - 是否有推荐的方法在 React 组件中运行设置，但只有在满足几个条件后才能运行？

Question

当我的组件安装时，它会向 API 发送多个数据请求。我的组件中有一个方法应该只在满足某些请求时运行，并且只运行一次。

我已经在使用 getDerivedStateFromProps 来运行其他不太需要的方法，但我不确定它是否正确，因为这里的想法是将新的 prop 值与以前的状态进行比较。我有 4 个不同的 Prop 需要检查以确保它们以前的状态为 null 并且新 Prop 具有值(value)。

我的一个想法是在状态中创建一个看起来像这样的条目:

this.state = {
    conditions: {
        conditionA: false,
        conditionB: false,
        conditionC: false,
        conditionD: false
    }
}

每次 Prop 有值(value)时，更新状态中的相关项目:

this.state = {
    conditions: {
        conditionA: false,
        conditionB: false,
        conditionC: true,
        conditionD: false
    }
}

一旦一切都为真，就启动该方法。但是有更好的方法吗？在运行方法之前，是否有推荐的方法来确保多个 Prop 具有值(value)？

Answer 1

Javascript 有一个 Promise.all您可以使用它来确保您的所有 Api 请求都已完成，然后采取行动。

向 Promise.all 的 .then() 回调传递一个包含所有 API 调用响应的数组，并在所有 API 调用成功时触发。即使失败，也会触发 .catch 回调

componentDidMount() {
   const req = urls.map((url) => { // make API requests
     return fetch(url);
   });

   Promise.all(req).then(res => {
      // make the function call here
    })
}