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

Posted 2023-03-10

【中文标题】背后的原因 (!nextProps.data.loading && this.props.data.loading)

【英文标题】：Reason behind (!nextProps.data.loading && this.props.data.loading)

【发布时间】：2018-06-07 04:42:32

【问题描述】：

在我的带有react-apollo 和react-router-redux 设置的react 应用程序中，每次我调度到一个新路由时，新的查询参数都会触发一个新的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

最后一个发生在组件从其他操作接收到新的 props 并且不触发 apollo 查询时，这完全有道理：

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

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

【参考方案1】：

您的组件从父组件/存储接收loading 属性，并在该属性应用于您的组件之前触发componentWillRecieveProps。所以从我收集的信息来看：

loading 在 store 中设置为 true，并且 store 告诉你的组件加载开始 - 它仍然是 false 在你的组件中

两者都设置为true

loading 在 store 中设置为 false，store 告诉你的组件加载完成

两者都设置为false

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