useLazyQuery 不会更新所有组件之间的数据

Question

我目前正在使用 rtk 查询的 useXXXLazyQuery 钩子来处理我的页面登录，问题是我的 ProtectedRoute 组件中没有最新数据。

代码如下：

ProtectedRoute 组件

import { type FC, type ReactNode } from 'react'
import { Navigate } from 'react-router-dom'
import { useLazyAuthQuery } from 'services/auth'

interface ProtectedRouteProps {
  children: ReactNode
}

const ProtectedRoute: FC<ProtectedRouteProps> = ({ children }) => {
  const [, results] = useLazyAuthQuery()

  if (results.data?.message !== 'authenticated') {
    return <Navigate to="/" replace />
  }

  return children
}

export { ProtectedRoute }

那就是我调用lazyQuery钩子的时候：

  ...
  const navigate = useNavigate()
  const [trigger, results] = useLazyAuthQuery()

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    const data = new FormData(event.currentTarget)

    trigger({
      username: data.get('username'),
      password: data.get('password'),
    })
      .unwrap()
      .then(() => {
        navigate('/table')
      })
  }
  ...

ProtectedRoute 组件上的

useLazyAuthQuery

结果始终未初始化，因此每当我尝试登录 ProtectedRoute 组件时，它都会让我退出应用程序。如何获取ProtectedRoute组件的最新数据？

Answer 1

你误会了

useLazyQuery

。

useLazyQuery

是一个始终以“未附加”方式启动的钩子，然后允许您执行触发器函数以将此一个钩子实例附加到查询（或启动一个新的钩子）。 但每个

useLazyQuery

都是独立的 - 调用其中一个的触发函数不会触发所有其他函数，因为最终它们的端点都可能有不同的参数。