Причина (! NextProps.data.loading && this.props.data.loading)

В моем приложении для реагирования с настройками react-apollo и react-router-redux каждый раз, когда я отправляю на новый маршрут, новый параметр запроса запускает новый запрос GraphQL. И мне часто требовались обратные вызовы после выполнения запроса.

Я не могу этого сделать в componentDidMount, потому что компонент никогда не выходит, он только повторно отрисовывается.

Итак, я нашел это решение здесь, в котором используются:

componentWillRecieveProps(nextProps){
  if (!nextProps.data.loading && this.props.data.loading) {
    doMyCallBack();
  }
}

Он работает отлично, но я не понимаю, почему. Как я заметил, componentWillReceiveProps запускается 3 раза при отправке на новый маршрут:

1) При переходе по ссылке:

nextProps.data.loading: true
this.props.data.loading: false

2) В какой ситуации верны обе переменные?

nextProps.data.loading: true
this.props.data.loading: true

3) Здесь мы выполняем обратные вызовы. Но данные все еще загружаются ??

nextProps.data.loading: false
this.props.data.loading: true

Последнее происходит, когда компонент получает новые реквизиты от других действий и не запускает запросы apollo, что совершенно логично:

nextProps.data.loading: false
this.props.data.loading: false

Я не могу понять, что происходит на шагах 1, 2 и 3.


reactjs react-router apollo-client react-apollo
person Liren Yeo    schedule 26.12.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Ваш компонент получает свойство loading от родительского компонента / хранилища, и componentWillRecieveProps срабатывает непосредственно перед тем, как это свойство будет применено к вашему компоненту. Итак, из того, что я понял:

  1. loading в магазине установлен на true, и магазин сообщает вашему компоненту, что начинается загрузка - он по-прежнему false в вашем компоненте

  2. он установлен на true в обоих

  3. loading установлен в false в магазине, магазин сообщает вашему компоненту, что загрузка завершена

  4. он установлен на false в обоих

1 и 3 срабатывают, чтобы передать loading опору из магазина в компонент, а 2 и 4 запускаются из-за обновлений других опор. (не связано с загрузкой)

person paqash    schedule 26.12.2017