React中使用useFetch获取对象数组数据如何正常渲染并解决data.name为空报错

核心问题说明 #

你遇到的报错有两个核心原因：

1. 异步请求时序问题：useFetch初始化时data为null，组件首次渲染时接口还未返回，直接访问data.name会触发空指针报错。
2. 数据结构不匹配：你的接口返回的是商品对象数组，不是单个商品对象，哪怕请求完成后直接写data.name也无法读取到正确属性。

优化步骤 #

1. 修复useFetch的错误捕获逻辑

你当前的useFetch在catch分支中将error设为了null，会导致请求失败时无法感知错误，修改如下：

// useFetch.js 中catch部分修改
.catch(err => {
    setError(err.message)
    setIsPending(false)
})

2. 调整Product组件的渲染逻辑

增加状态判断，确认数据加载完成后遍历数组渲染内容，同时用可选链和兜底值避免空字段报错：

import React from "react";
import "../Style/menu.css";
import { useParams } from "react-router-dom";
import useFetch from "../ApiService/useFetch";

const Product = () => {
    const { id } = useParams();
    const { data, error, isLoading } = useFetch("http://localhost:8080/products/category/" + id);

    // 加载中状态
    if (isLoading) return <div>数据加载中，请稍候</div>
    // 请求错误状态
    if (error) return <div>请求失败：{error}</div>

    return (
        <div className="product-container">
            {data?.map((item) => (
                <div key={item.id} className="product-card">
                    <p>商品名称：{item?.name ?? "暂无名称"}</p>
                    <p>商品价格：{item?.price ?? "暂无价格"}</p>
                    {/* 其他需要展示的字段可按照上述格式扩展 */}
                </div>
            ))}
        </div>
    )
}

export default Product;

方案说明 #

• 前置的加载、错误状态判断，保证只有请求成功拿到非空的data之后才会执行商品列表渲染，彻底避免访问null属性的报错
• 对数组类型的data使用map遍历，才能拿到每一个商品项的对应属性
• 可选链运算符?.和空值合并运算符??可以在单个商品字段为空时，正常显示兜底内容，不会抛出报错。

内容的提问来源于stack exchange，提问作者Sem de Wilde