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()但请注意，它必须包含在上面示例中的条件中，否则会导致无限循环。

Answer 2

您可以在componentDidUpdate()使用setState() componentDidUpdate() 。 但是您必须为此使用条件。 否则，它会无限循环。

作为例子，

 componentDidUpdate(){
    if(this.props.id !== this.state.id) {
        this.setState({
            id: this.props.id 
        });
    }
 }

Answer 3

发生这种情况是因为 setState 触发了对 componentDidUpdate 的调用。

调用 componentDidUpdate 时，setState 不会检查是否发生了状态更改。 它只是一次又一次地调用 componentDidUpdate，这会导致 stackoverflow。

  class Component extends React.Component{
    constructor(props){
      super(props);
      this.state = {changeState: false}
    }
    componentDidMount(){
      this.setState({changeState: true});
    }
    componentDidUpdate(){
        this.setState({changeState: false});
    } 
 }

这里首先在构造函数中将changeState设置为false，然后触发componentDidMount，将changeState的状态设置为true。 此状态更改触发 componentDidUpdate，它再次将 changeState 的状态设置为 true。 这会一次又一次地触发 componentDidUpdate。

Answer 4

您必须检查两个状态对象之间的真正区别。 你可以在下面找到我的解决方案，我的状态对象有电影，它是一个对象数组。 我编辑和电影，然后比较这两个数组。

    async componentDidUpdate(prevProps, prevState) {

        if (prevState.movies.filter (e => this.state.movies.includes(e))) {
        const response = await axios.get("http://localhost:3002/movies");
        this.setState({ movies: response.data })
    }
}

Answer 5

是的，您不能在 componentDidUpdate 内设置状态（），它会导致无限循环。相反，您可以调用函数 onChange 事件并更改那里的状态。