componentDidUpdate вызывает бесконечный цикл - PullRequest
Новая
       13

componentDidUpdate вызывает бесконечный цикл

0 голосов
/ 10 июля 2019

У меня есть компонент (показывающий список), который рендерится до обновления реквизита (приставки) (есть новый элемент, который добавляется в список и должен отображаться, но это не так, если приложение не перезагружено).Я написал это, чтобы предотвратить такое поведение: 

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.data === nextProps.data) {
      return false;
    } else {
      return true;
    }
  }
  componentWillUpdate(prevProps){
      if(prevProps.data !== this.props.data){
         this.props.onFetchAction()
      }
  }

он обновляет компонент перед рендерингом, НО на консоли onFetchAction () запускается без остановки.Как я могу предотвратить это ?????любая помощь будет оценена.

Ответы [ 3 ]

0 голосов
/ 10 июля 2019

Я полагаю, что бесконечный цикл вызван onFetchAction. Если onFetchAction является функцией, которая вызывает обновление this.props.data, тогда это условие всегда будет истинным, отсюда и бесконечный цикл. 

 if(prevProps.data !== this.props.data){  //always true
     this.props.onFetchAction() //updates this.props.data
 }

Вы должны убедиться, что то, что когда-либо происходит в onFetchAction, не обновляет напрямую this.props.data.

Ответ на комментарий.

Если onFetchAction обновляет this.props.data, то я не думаю, что то, что вы делаете, сработает. Я бы лично установил onFetchAction в componentWillMount. И затем, когда вам понадобится обновить this.props.data, вызовите onFetchAction для любой функции, в которой вы нуждаетесь. 

componentWillMount() {
     this.props.onFetchAction()
}
0 голосов
/ 10 июля 2019

это решает проблему: 

shouldComponentUpdate(nextProps, nextState) {
    if (this.props.data === nextProps.data) {
      return false;
    } else {
      return true;
    }
  }
  componentDidUpdate(prevProps,prevState){
      if(prevProps.data.length !== this.props.data.length){
        this.props.onFetchAction()

      }
  }
0 голосов
/ 10 июля 2019

Возможно, позвонив по номеру this.props.onFetchAction(). Вы обновляете props.data. Какой тип данных вы храните в this.props.data? Если это объект, вы проводите сравнение по ссылкам, а не по данным. Вот почему prevProps.data !== this.props.data всегда будет false, и у вас будет бесконечный цикл.

Вы можете использовать isEqual (https://lodash.com/docs/4.17.14#isEqual) метод библиотеки lodash. Этот метод будет проверять два объекта по данным в нем, а не по ссылкам. Поэтому код будет выглядеть так: if (!isEqual(prevProps.data, this.props.data) { ... }.

...