React使用Context Provider时出现已卸载组件无法更新状态错误如何解决

错误原因 #

• 登出逻辑执行顺序异常：你在登出的update回调中先修改了MeQuery缓存将me设为null，此时PrivateRoute检测到登录态消失，立即触发重定向跳转到登录页，BookProvider随Dashboard页面一起被卸载。之后才执行异步的client.resetStore()，缓存重置会触发所有活跃查询重新执行，包括BookProvider中配置了轮询的书籍查询，此时组件已经卸载，查询返回后尝试更新组件状态就触发了该警告。
• 轮询任务未清理：BookProvider中的useQuery设置了500ms的pollInterval轮询，但没有在组件卸载时停止轮询，组件卸载后轮询任务依然在运行，每次轮询返回都会尝试更新已卸载组件的状态，也是报错的核心原因之一。

修复方案 #

1. 调整登出逻辑执行顺序 #

将缓存修改操作放到resetStore执行完成之后，确保重定向跳转发生在所有缓存重置、查询重执行逻辑结束之后：

export function useLogout() {
  const client = useApolloClient()

  const logout = useMutation(gql`mutation Logout { logout }`, { update: async cache => { 
    await client.resetStore()
    cache.writeQuery({ query: MeQuery, data: { me: null }})
  }})

  return logout
}

2. 清理BookProvider的轮询任务 #

在BookProvider中通过useEffect的清理函数调用stopPolling停止轮询，避免组件卸载后仍有轮询任务运行：

export const BookProvider = ({ children }) => {
  // 取出stopPolling方法
  const { loading, data, stopPolling } = useQuery(gql`{
    books {
        id,
        name,
        description
    }
  }`, {
    pollInterval: 500
  })  

  // 组件卸载时停止轮询
  useEffect(() => {
    return () => stopPolling()
  }, [stopPolling])

  if(!data?.books || loading) return null

  return (
    <BookContext.Provider value={data?.books}>
      {children}
    </BookContext.Provider>
  )
}

如果不需要实时轮询，直接移除pollInterval配置也可以解决该问题。

Context Provider中运行查询是否为最佳实践 #

该方案不属于通用最佳实践，仅适合特定场景：

• 适合使用的场景：用户信息、全局配置等全应用多处组件都需要访问、更新频率低的数据，放在顶层Provider中查询可以避免多个组件重复发起相同查询，减少重复代码。
• 不适合使用的场景：仅单个页面/少量组件需要的数据，放在Provider中查询会带来两个问题：1. 非相关页面加载时也会执行不必要的查询，浪费资源；2. Context value变化时会触发所有消费该Context的组件重渲染，没有做好引用优化的情况下会带来明显的性能损耗。
• 替代方案：你当前使用的Apollo Client本身自带查询缓存，相同的查询在多个组件调用useQuery只会发起一次请求，完全可以直接在需要用到书籍数据的组件中直接执行useQuery，不需要额外用Context封装，减少额外的维护成本和性能风险。

内容的提问来源于stack exchange，提问作者Bas