背后的原因(！nextProps.data.load && this.props.data.load)

Question

在我的React应用程序中，使用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

当组件从其他动作接收新道具并且不会触发阿波罗查询时，这是最后一次发生的事情，这完全有意义：

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

我无法弄清楚在步骤1、2和3中发生了什么。

Answer 1

您的组件从父组件/存储中接收loading Prop，并且componentWillRecieveProps在将该支架应用于组件之前。因此，根据我的收集：

1. loading设置为商店中的true，商店告诉您的组件加载开始 - 它仍然是您的组件中的false

2. 它都设置为true

3. loading设置为商店中的false，商店告诉您的组件加载已完成

4. 它都设置为false

1和3正在发射以将loading支柱从商店传递到组件，而2和4由于其他道具是更新而发射的。 （与加载无关）