ComponentDidUpdate SetState ReactJS 无限循环

Question

即使有很多问题的主题行相同，我也无法得到我的问题的答案。

问题

我有一个选择下拉菜单。点击它，我调用一个 Api 来获取一些关键值。我将这组键值输入字段视为一个组件。所以每次我选择下拉菜单的 onChange 时，我都使用生命周期方法来处理 API 调用。此外，我记录这些输入键值并将它们的状态发送回父组件。

根据 ReactJS 生命周期方法：

我用

componentDidMount 初始渲染后第一次调用API。这有效。

componentDidUpdate 在选择下拉更改时为后续 API 调用调用 API。但问题就在这里。当我尝试更新输入字段的状态时，程序陷入无限循环，因此有无限的 API 调用。调试后我很确定问题出在 setState() 上，但我找不到在 componentDidUpdate 方法中处理状态的最佳方法。

此链接完全复制了我的问题，但我想要一个标准化的解决方案

希望这很清楚。我在这里先向您的帮助表示感谢！

Answer 1

这在文档中非常清楚地说明：

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

您可以在 componentDidUpdate () 中立即调用 setState()但请注意，它必须包含在类似于上面示例中的条件中，否则会导致无限循环。