React ComponentDidUpdate 方法为每个道具触发部分更改为多个道具。如何知道所有的道具都更新了并采取相应的行动？答案

【问题标题】：React ComponentDidUpdate method fires for each props change partially for multiple props. How to know all props are updated and act accordingly?React ComponentDidUpdate 方法为每个道具触发部分更改为多个道具。如何知道所有的道具都更新了并采取相应的行动？
【发布时间】：2021-05-20 14:21:57
【问题描述】：

我有一个 react 组件，比如 MyComponent 有两个 props text 和 num 可以独立改变。考虑以下代码：

componentDidUpdate(prevProps) {
  if (this.props.text !== prevProps.text || this.props.num !== prevProps.num) {
      this.getDataAPICall(this.props.text, this.props.num);
  }
}

// Incoming data is dependent on both text and num
getDataAPICall(text, num) {
  fetch(SOMEURL+'/text/num').then(d => d.json())
     .then(data => {
       setState({ renderdata: data });
  })

}

如果只更改其中一个道具，则没有问题。但是，当道具发生变化时，例如，text 从“a”变为“b”，num 从 1 变为 2，我意识到 componentDidUpdate 被 text 和 num 调用了两次价值观： text: "b", num: 1 和 text: "b", num: 2。

由于num 可能会或可能不会改变（我不能确定），我也必须使用text: "b" 和num: 1 调用getDataAPICall。这会导致两个 API 调用（第一个获取错误数据的地方）。此外，根据调用的完成时间，组件的最终状态可能最终包含错误的数据。

我的问题是：这是 componentDidUpdate 的默认行为还是我在父组件中犯了错误？如果这是默认行为，如何避免使用部分更新的道具进行第一次 API 调用？

注意：这两个props其实也是父组件的props，通过mapStateToProps来自redux store。

谢谢

【问题讨论】：

我认为您在某处犯了错误。如果您看到多次调用 componentDidUpdate 并更改了不同的属性，则意味着这些属性没有同时更改，而是在多次渲染父组件之后。
@keul 谢谢。如果是这样，我会进一步调查。
@OmerSinanSarac 这些道具传递了什么，它们是如何改变的？发出异步请求并将它们设置为解析可能会得到一些unexpected results。确保仅在最后一次更改道具时设置状态。

标签： reactjs react-redux react-lifecycle

【解决方案1】：

根据我对您问题的理解，您正确使用了 componentDidUpdate。您将 API 调用放置在何处（父组件或子组件）也无关紧要，因为您在设计比赛（如果 text 或 num 发生变化，您必须调用 API）。

解决此问题的一种可能方法是使用 AbortControllers (https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort) 取消第一个请求并在第二个 prop 更改后重新发出它。这有点棘手，因为您必须为第一个正在进行的请求提供第三种状态。

希望对你有帮助

【讨论】：

【解决方案2】：

我解决问题后忘记写答案了。这是一个较晚的答案，但也许会对处于类似情况的人有所帮助。

多个 componentDidUpdate 调用的原因是 'text' 和 'num' 道具的单独分派。对 Redux 存储的每次分派都会导致连接到组件的每个 prop 的组件更新。在我的例子中，可以检查这两个值并在同一调度中更新它们在 Redux 存储中，如果它们中的任何一个发生更改，这解决了问题。但如果这不可能，Denis Sicun 在this answer 中提出的建议似乎是最好的方法。

感谢大家帮我解决问题。

【讨论】：