React-Query获取数据为undefined引发map读取错误的原因排查

问题根源 #

1. 请求未完成时的初始状态 #

React-Query 在请求发起后、成功返回数据前，data（即你定义的userData）的初始值是undefined。你直接调用userData.map()，自然会触发「无法读取undefined的map属性」错误。

2. 错误处理的遗漏 #

你的queryFn里用了try/catch，但catch块只打印错误、没有返回任何值。如果请求失败，queryFn会返回undefined，导致userData依然是undefined。

解决方法 #

1. 给userData设置默认空数组 #

解构时直接给userData赋默认值，确保无论请求状态如何，它都是可遍历的数组：

const { data: userData = [] } = useQuery(...)

2. 利用React-Query的状态做判断 #

React-Query 会返回isLoading、error等状态，用这些状态在不同阶段展示对应UI，避免操作未就绪的数据：

• 加载中时显示提示
• 出错时显示错误信息
• 成功时渲染列表

3. 完善错误抛出逻辑 #

去掉多余的try/catch，改用检查响应状态码抛出错误，让React-Query自动捕获错误到error状态，方便统一处理：

queryFn: async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users')
    if (!res.ok) {
        throw new Error('用户数据加载失败')
    }
    return res.json()
}

修改后的完整代码 #

import React from 'react'
import { useQuery } from '@tanstack/react-query';

const Query = () => {
    const { data: userData = [], isLoading, error } = useQuery({
        queryKey: ["user"], 
        queryFn: async () => {
            const res = await fetch('https://jsonplaceholder.typicode.com/users')
            if (!res.ok) {
                throw new Error('用户数据加载失败')
            }
            return res.json()
        }
    })

    if (isLoading) {
        return <div>加载中...</div>
    }

    if (error) {
        return <div>加载失败：{error.message}</div>
    }

    return (
        <div>
            {userData.map((user) => {
                return <p key={user.id}>{user.name}</p>
            })}
        </div>
    )
}

export default Query

额外说明：给列表元素加上key属性，符合React列表渲染的规范，避免不必要的重渲染。

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