React Query useQuery编译成功但页面空白的问题求助

你的问题核心是React Query 请求未完成时，data 处于 undefined 状态，直接访问 data.fact 触发 TypeError，导致组件渲染崩溃，页面空白。从控制台截图的报错也能验证这一点——无法读取 undefined 的 fact 属性。

解决方法 #

1. 利用 isLoading 状态处理加载中逻辑

useQuery 会返回 isLoading 状态，用来判断请求是否在进行中。在数据加载完成前，显示加载提示，避免访问未就绪的 data：

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

export const Home = () => {
    const { data, isLoading } = useQuery(["cat"], () => {
        return Axios.get("https://catfact.ninja/fact").then((res) => res.data);
    });

    // 加载中时显示占位内容
    if (isLoading) {
        return <div>加载中...</div>;
    }

    return (
        <div>
            <h1>This is Home page </h1>
            <p>{ data.fact }</p>
        </div>
    );
}

2. 使用可选链操作符（?.）安全访问属性

可选链操作符允许你在访问嵌套属性时，自动处理上层值为 undefined 或 null 的情况，不会抛出错误：

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

export const Home = () => {
    const { data } = useQuery(["cat"], () => {
        return Axios.get("https://catfact.ninja/fact").then((res) => res.data);
    });

    return (
        <div>
            <h1>This is Home page </h1>
            {/* 用?.避免data为undefined时的报错 */}
            <p>{ data?.fact || '暂无数据' }</p>
        </div>
    );
}

3. 给 data 设置默认解构值

在解构 useQuery 返回值时，给 data 设置默认空对象，确保访问 data.fact 时不会直接报错：

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

export const Home = () => {
    // 解构时给data默认空对象
    const { data = {} } = useQuery(["cat"], () => {
        return Axios.get("https://catfact.ninja/fact").then((res) => res.data);
    });

    return (
        <div>
            <h1>This is Home page </h1>
            <p>{ data.fact || '暂无数据' }</p>
        </div>
    );
}

额外说明 #

React Query 在请求发起后，会经历 isLoading → data 就绪的状态变化。初学者容易忽略初始状态下 data 为 undefined 的情况，直接访问嵌套属性就会导致组件崩溃。上述三种方法都能有效避免这个问题，推荐优先使用第一种（显式处理加载状态），用户体验更友好。

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