React中使用RTK Query时已卸载组件出现内存泄漏问题如何处理

RTK Query 本身已经针对组件卸载的场景做了原生适配，默认直接使用查询 hook 返回的 isError、isSuccess 等原生状态不会触发内存泄漏警告，出现报错通常是额外的自定义逻辑导致的，对应解决方案如下：

场景1：手动同步RTK Query状态到本地组件状态 #

如果你的代码中存在将RTK Query返回的状态同步到组件本地state的逻辑，需要在更新前增加挂载状态判断：

const [localError, setLocalError] = useState(null)
const { isError, error } = useGetUserQuery(userId)

useEffect(() => {
  let isMounted = true
  if (isError && isMounted) {
    setLocalError(error)
  }
  return () => {
    isMounted = false
  }
}, [isError, error])

最佳实践是优先直接使用RTK Query hook返回的状态，不需要额外同步到本地state，从根源避免这类问题。

场景2：使用unwrap()处理请求结果 #

调用懒查询/修改的触发函数后使用unwrap()处理结果时，组件卸载会自动中止请求，此时unwrap()会抛出AbortError，主动过滤该类型错误即可：

const [getUser] = useLazyGetUserQuery()

useEffect(() => {
  const fetchData = async () => {
    try {
      const userData = await getUser(userId).unwrap()
      // 正常处理请求结果
    } catch (err) {
      // 忽略组件卸载导致的请求中止错误
      if (err.name !== 'AbortError') {
        // 处理其他业务错误
        console.error('请求失败：', err)
      }
    }
  }
  fetchData()
}, [getUser, userId])

注意事项 #

RTK Query 的查询hook会在组件卸载时自动取消对查询缓存的订阅、中止未完成的请求，不需要手动编写请求取消逻辑，只要处理好自定义逻辑中的边界情况即可避免内存泄漏报错。

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