reactjs - 每当我的 Apollo 订阅在 React 中被触发时，我如何调用函数？

Question

我有一个反应组件，它在 apollo graphql 查询上使用 subscribeToMore 方法来更新自身的变化。这样做很好，但是我想在订阅进行更改时调用一些外部函数。我想在 UI 中显示一些事情已经改变的提示，让我们调用我们的函数“onUpdate”，我在哪里调用这个 onUpdate 函数？

我的组件在渲染函数之前有一些看起来像这样的代码：

subscribeToNewPoints = () => {
  this.props.studentSessionPointsQuery.subscribeToMore({
    document: NEW_POINT_STUDENT_SESSION_SUBSCRIPTION,
    variables,
    updateQuery: (previous, { subscriptionData }) => {
      const newAllPoints = [
        subscriptionData.data.Point.node,
        ...previous.allPoints
      ]
      const result = {
        ...previous,
        allPoints: newAllPoints
      }
      return result
    }
  })
}

componentDidMount() {
    this.subscribeToNewPoints()
}

我应该把我的 onUpdate 函数放在这里还是其他地方？

如果在另一个问题中回答了这个问题，请原谅我，但我能找到的所有其他问题似乎都在询问如何更新查询的缓存或如何让订阅首先工作。

Answer 1

React 有它的生命周期事件ComponentWillUpdate，它在你的组件获得更新之前调用。或者您可以ComponentDidUpdate在组件获得更新后使用 which 调用。

ComponentWillUpdate() {
 /*called just before an update */
 onUpdateFunc()
}

ComponentDidUpdate() {
 /*called just after an update */
 onUpdateFunc()
}