背后的理由(!nextProps.data.loading && this.props.data.loading)

Question

在我使用react-apollo和react-router-redux设置的react应用程序中，每次我发送到一个新的路径时，新的查询param都会触发一个新的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

我不知道第一、第二和第三步发生了什么。

Answer 1

您的组件从父组件/存储接收到loading支柱，而componentWillRecieveProps在将该支柱应用于组件之前触发。所以据我所知：

1. loading在商店中设置为true，商店告诉您的组件开始加载--它仍然是组件中的false
2. 在这两个文件中，它都设置为true
3. 在商店中，loading设置为false，存储将告诉组件加载已经完成。
4. 在这两个文件中，它都设置为false

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