React Query中数组无法遍历，访问元素返回undefined求助

问题根源 #

你的getUsers函数没有正确处理异步请求：axios的get是异步操作，函数直接返回了空数组users，React Query拿到的是这个初始空数组。后续axios请求完成后虽然修改了users数组，但此时组件已完成渲染，且数组是引用类型导致console.log会延迟展示更新后的内容，但代码执行usersQuery.data[1]时数组仍为空，所以返回undefined。

解决方案 #

1. 修正getUsers函数，返回Promise #

让函数正确返回axios请求的Promise，确保React Query能等待异步请求完成后获取到完整数据：

方式一：使用async/await

import axios from "axios";

async function getUsers() {
  try {
    const response = await axios.get("https://random-data-api.com/api/v2/users?size=5&response_type=json");
    return response.data;
  } catch (err) {
    console.error(err);
    throw err; // 必须抛出错误，React Query才能触发isError状态
  }
}

export default getUsers;

方式二：直接返回Promise链

import axios from "axios";

function getUsers() {
  return axios
    .get("https://random-data-api.com/api/v2/users?size=5&response_type=json")
    .then(res => res.data)
    .catch(err => {
      console.error(err);
      throw err;
    });
}

export default getUsers;

2. 优化App组件的状态判断 #

用isSuccess替代isFetched，isSuccess会在请求成功且数据就绪后才为true，避免提前访问未就绪的数据：

import React from "react";
import getUsers from "./GetUsers";
import { useQuery } from "@tanstack/react-query";

function App() {
  const usersQuery = useQuery({
    queryKey: ["initUsers"],
    queryFn: getUsers, // 无需额外包裹函数
  });

  if (usersQuery.isLoading) return <p>Loading...</p>;
  if (usersQuery.isError) return <p>something went wrong</p>;
  if (usersQuery.isSuccess) {
    console.log(usersQuery.data);
    console.log(usersQuery.data[1]);
    return (
      <ul>
        {usersQuery.data.map(user => (
          <li key={user.id}>{user.first_name}</li>
        ))}
      </ul>
    );
  }

  return null; // 兜底返回
}

export default App;

关键说明 #

• React Query的queryFn必须返回Promise，这样它才能正确处理异步状态（loading/success/error）。
• 原代码中修改空数组的操作不会触发React Query的重新渲染，因为React Query追踪的是初始返回的数组引用，而非数组内部的变化。

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