React嵌套路由携带id参数时使用自定义useFetch Hook获取数据无法展示求助

核心问题说明 #

• useFetch 自定义Hook的返回值是数组格式，但你在Product组件中使用了对象解构的方式取值，导致永远无法正确拿到请求返回的data和error
• 你调用的http://localhost:8080/products/category/{id}接口返回的是指定分类下的所有产品数组，不是单个产品对象，你直接访问数组的name属性自然不存在，这就是报错提示你"应该将数据放到数组中"的原因
• useFetch的catch回调中错误地将error设置为null，导致请求出错时无法正常展示错误信息

修改后的代码 #

useFetch.js #

import { useState, useEffect } from "react";

const useFetch = (url) => {
    const [data, setData] = useState(null)
    const [error, setError ] = useState(null)

    useEffect(() => {
        setTimeout(() => {
            fetch(url)
            .then(res => {
                if(!res.ok) {
                    throw Error('could not fetch data');
                }
                return res.json();
            })
            .then(data =>  {
                setData(data);
                setError(null); // 请求成功清空错误
            })
            .catch(err => {
                setError(err.message) // 出错时存储错误信息
            })
        }, 1000);
    }, [url]);

    return [data, error]
}

export default useFetch;

Product.js #

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

const Product = () => {
    const { id } = useParams();
    // 改为数组解构匹配useFetch的返回格式
    const [productList, error] = useFetch('http://localhost:8080/products/category/' + id);

    return (
        <div>
            {error && <div>{ error } </div>}
            {productList && (
                <>
                    <h1>当前分类产品列表</h1>
                    {/* 直接使用你引入的ProductList组件传递产品数组即可，也可以自己用map遍历渲染 */}
                    <ProductList products={productList} />
                    {/* 如果你要自己渲染可以用下方写法
                    <ul>
                        {productList.map(product => (
                            <li key={product.id}>{product.name}</li>
                        ))}
                    </ul>
                    */}
                </>
            )}
        </div>
    )
}

export default Product;

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