背后的原因 (!nextProps.data.loading && this.props.data.loading)

Question

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

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

所以我找到了这个解决方案here，它使用：

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

它工作得很好，但我不太明白为什么。正如我所注意到的，componentWillReceiveProps 在调度到新路线时被触发了 3 次：

1) 单击 link 后：

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

您的组件从父组件 component/store 接收 loading 道具，并且 componentWillRecieveProps 在该道具应用于您的组件之前触发。所以据我所知：

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

Reason behind (!nextProps.data.loading && this.props.data.loading)