我有一个 React 组件，它调用后端 API，该 API 返回一个对象数组。 本质上，我有一个 useFetch.js 文件，它获取数据，然后显示在 Products.js 文件中

我的主要问题是，当我只是记录返回的数据时，无论我刷新浏览器多少次，总是会记录正确的数据。但是，一旦我包含一个地图来呈现数据，它就会 仅第一次 显示，然后我收到错误

Cannot read property 'map' of null

当我仅记录数据时的简单场景中的细分：

Products.js

import React from "react";

import useFetch from "./useFetch";
import DisplayTable from "./DisplayTable"

export default function Products(props) {
    const [data, loading, error] = useFetch("http://localhost:8080/products");
    console.log("data", data)
    console.log("loading", loading)
    console.log("error", error)

    return (
        <div>
            
        </div>
    )
}

useFetch.js

import { useState, useEffect } from "react";

export default function useFetch(url) {
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(false);
    const [data, setData] = useState(null);

    async function asyncFetchAPI() {
        setLoading(true)
        fetch(url, {method: "GET"})
            .then(response => response.json())
            .then(data => setData(data))
            .then(loading => setLoading(false))
            .catch((error) => {
                 console.log('error: ' + error)
                 setError(true)
            })
    }

    useEffect(() => {
        asyncFetchAPI();
    }, []);

  return [data, loading, error];
}

以上工作正常，我可以完美地在控制台中看到数据。但是，当我修改 Products.js 以包含地图并按如下方式显示时

const displayTable = data.map(item => <DisplayTable key={item.id} item={item} />)

现在的新结果是：

import React from "react";

import useFetch from "./useFetch";
import DisplayTable from "./DisplayTable"

export default function Products(props) {
    const [data, loading, error] = useFetch("http://localhost:8080/products");
    console.log("data", data)
    console.log("loading", loading)
    console.log("error", error)

    const displayTable = data.map(item => <DisplayTable key={item.id} item={item} />)

    return (
        <div>

        </div>
    )
}

此时，我得到

Cannot read property 'map' of null

值得一提的是，我的 DisplayTable.js 函数如下所示：

import React from "react"

function DisplayTable(props) {
    console.log(props)
    return (
        <h1>{props.item.categoryId}</h1>
    )
}

export default DisplayTable