Javascript React.JS-ComponentDidUpdate方法为Axios调用提供无限循环

你好

一旦我的路线上的新道具发生变化，我将尝试获取新数据

以下是我的示例路由：

<Route path={'/students/:selectedPage'} exact component={Students} />

对于my

componentDidUpdate

方法，如果我的url的

param

中有新的更改，将触发该方法

componentDidUpdate(): void {
    if (this.props.match.params.selectedPage !== prevProps.selectedPage){
        this.getData(this.props.match.params.selectedPage)
    }
}

不幸的是，这会导致web api发出无限请求。这就使桌子显得迟钝。我试图创建一个名为hasload的状态，但它给了我一条错误消息，上面说，检测到无限循环

---

有什么建议吗？

在

组件中比较您的道具将收到这样的道具

shouldComponentUpdate: function(nextProps, nextState) {
    return nextProps.selectedPage != this.props.selectedPage ;
}

 componentWillReceiveProps(nextProps) {
    if (nextProps.selectedPage !== this.props.selectedPage ) {
      //this.setState({ selectedPage : nextProps.selectedPage })
        this.getData(nextProps.selectedPage)
    }
  }

或者改为执行此操作
使所选页面保持状态

  static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.selectedPage !== prevState.selectedPage ) {
            return { selectedPage : nextProps.selectedPage };
        }
        else return null;
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevProps.selectedPage !== this.props.selectedPage ) {
            //Perform some operation here
            //this.setState({ selectedPage : this.props.selectedPage });
            this.getData(this.props.selectedPage)
        }
    }
    ```

比较
组件中的道具将收到这样的道具

shouldComponentUpdate: function(nextProps, nextState) {
    return nextProps.selectedPage != this.props.selectedPage ;
}

 componentWillReceiveProps(nextProps) {
    if (nextProps.selectedPage !== this.props.selectedPage ) {
      //this.setState({ selectedPage : nextProps.selectedPage })
        this.getData(nextProps.selectedPage)
    }
  }

或者改为执行此操作
使所选页面保持状态

  static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.selectedPage !== prevState.selectedPage ) {
            return { selectedPage : nextProps.selectedPage };
        }
        else return null;
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevProps.selectedPage !== this.props.selectedPage ) {
            //Perform some operation here
            //this.setState({ selectedPage : this.props.selectedPage });
            this.getData(this.props.selectedPage)
        }
    }
    ```

查看您发布的代码，我觉得很好，`componentDidMount'应该触发一次，组件应该基于状态属性进行呈现。但是，您需要检查调用此组件的代码（在前面的组件中），如果这使得无限调用成为可能的话。或者显示您的路由，这可能有助于检测问题hi@MuhammadMuradHaider我添加了带参数的路由。这似乎很好，请检查按钮单击或其他导致
学生
组件的内容，如果由于
component的原因，
Students
组件的didmount
被多次触发。请彻底检查此情况<代码>this.props.match.params.selectedPage！==prevProps.selectedPage
尝试
prevProps.match.params.selectedPage
而不是查看您发布的代码，我觉得很好，“componentDidMount”应该触发一次，组件应该根据状态属性呈现。但是，您需要检查调用此组件的代码（在前面的组件中），如果这使得无限调用成为可能的话。或者显示您的路由，这可能有助于检测问题hi@MuhammadMuradHaider我添加了带参数的路由。这似乎很好，请检查按钮单击或其他导致
学生
组件的内容，如果由于
component的原因，
Students
组件的didmount
被多次触发。请彻底检查此情况<代码>this.props.match.params.selectedPage！==prevProps.selectedPage

尝试

prevProps.match.params.selectedPage

而不是此操作，但我需要双击按钮才能触发

组件将接收Props

方法。我按了一下按钮，但它不工作。我按了两下按钮，它就工作了。但这并不可靠，因为用户需要双击按钮来更改路由。您显示的第一个示例代码正在运行，但我需要双击按钮才能刷新表，但它基于我的浏览器网络选项卡发送了一个请求。请尝试在ComponentWillUpdate中执行此操作。它在

componentWillUpdate

我在示例参数

alert（this.props.match.props.studentId）

中的

componentWillReceiveProps

中放置了一个警报框，但它在第一次单击时给出了上一个参数，然后在第二次单击时给出了所需的参数。这很有效，但是我需要双击按钮才能触发

组件willreceiveprops

方法。我按了一下按钮，但它不工作。我按了两下按钮，它就工作了。但这并不可靠，因为用户需要双击按钮来更改路由。您显示的第一个示例代码正在运行，但我需要双击按钮才能刷新表，但它基于我的浏览器网络选项卡发送了一个请求。请尝试在ComponentWillUpdate中执行此操作。它在

componentWillUpdate

我在示例参数

alert（this.props.match.props.studentId）

中的

componentWillReceiveProps

中放置了一个警报框，但它在第一次单击时给出了上一个参数，然后在第二次单击时给出了所需的参数。