背后的原因（！nextProps.data.loading＆amp;＆amp; this.props.data.loading）

Question

在我的react-apollo和react-router-redux设置的反应应用中，每次调度到新路由时，新的查询参数都会触发新的GraphQL查询。在查询完成后我经常需要回调。

我无法在componentDidMount中执行此操作，因为该组件永不退出，只会重新渲染。

所以我发现这个解决方案here使用了：

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中发生了什么。

Answer 1

您的组件从父组件/商店收到loading道具，并且在该道具应用于您的组件之前发生componentWillRecieveProps。所以从我收集的内容：

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

2. 在

中设置为true

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

4. 在

中设置为false

1和3正在开火以将loading道具从商店传递到组件，并且由于其他道具正在更新，2和4正在开火。  （与装载无关）