React. JS - Метод ComponentDidUpdate дает бесконечные L oop для вызовов Ax ios - PullRequest
Новая
       3

React. JS - Метод ComponentDidUpdate дает бесконечные L oop для вызовов Ax ios

1 голос
/ 30 марта 2020

Добрый день,

Я пытаюсь получить новые данные, как только новые реквизиты меняются на моем маршруте.

Вот мой пример маршрутизации: 

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

По сути, у меня есть метод, который выбирает мои данные. Поэтому я вызываю его в моем componentDidMount() Вот мои примеры кодов: 

componentDidMount(): void {
    this.getData()
}

getData(selectedPage){
    axios.get(`http://localhost:1343/students/${selectedPage}`).then(response=>{
        this.setState({
            students: response.data
        })
    }).catch(error=>console.log(error)
}

Для моего componentDidUpdate метода, который запускает, если есть новые изменения в param моего URL. 

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

К сожалению, это вызывает бесконечный запрос от веб-API. Что делает стол медленным. Я пытался создать состояние с именем hasLoaded, но выдает сообщение об ошибке, в котором говорится, что обнаружен бесконечный l oop.

Любой совет?

1 Ответ

0 голосов
/ 30 марта 2020

Сравните ваши реквизиты в ComponentWillReceiveProps, как это, 

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)
    }
  }

или Сделайте это вместо Keep your selectedPage in state

  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)
        }
    }
    ```
...