如何向React-Query的useQuery传递多个参数给查询函数？

你的代码核心问题是useQuery的第二个参数传错了：你直接执行了getUsers(...)，这会返回一个Promise，而useQuery需要的是一个返回Promise的函数，不是Promise本身。这会导致React-Query无法正确管理查询的加载、错误、缓存状态，所以页面没有内容显示。

正确写法1：用匿名函数包裹调用 #

把getUsers的调用放在匿名函数里，让useQuery在需要的时候才执行它：

const { isLoading, isError, data } = useQuery(
  ["getUsers"],
  () => getUsers(
    location?.state?.code || cookies.get("code"),
    cookies.get("accessToken"),
    cookies.get("expirationDate")
  )
);

正确写法2：参数加入查询键（推荐） #

如果你的参数（code、accessToken等）可能变化，要把这些参数加入查询键数组。这样当参数改变时，React-Query会自动识别为新的查询，重新发起请求，而不是复用旧缓存：

// 先提取参数，避免重复调用cookies.get和location取值
const code = location?.state?.code || cookies.get("code");
const accessToken = cookies.get("accessToken");
const expirationDate = cookies.get("expirationDate");

const { isLoading, isError, data } = useQuery(
  ["getUsers", code, accessToken, expirationDate],
  () => getUsers(code, accessToken, expirationDate)
);

补充：处理渲染逻辑 #

页面空白还可能因为你没处理加载和错误状态，以及axios响应的结构：

• axios的post请求返回的响应中，接口实际数据在data.data里（外层data是axios的响应对象，内层data是接口返回的内容）
• 添加加载、错误状态的提示，避免页面空白：

if (isLoading) {
  return <div>正在加载用户列表...</div>;
}

if (isError) {
  return <div>加载用户列表失败，请稍后重试</div>;
}

// 渲染实际数据
return (
  <div>
    {data?.data?.map(user => (
      <div key={user.id}>{user.name}</div>
    ))}
  </div>
);

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