Javascript 无法读取属性'；地图'；空的

我有一个React组件，它调用一个后端API，该API返回一个对象数组。 本质上，我有一个

useFetch.js

文件，它获取数据，然后显示在

Products.js

文件中

const [data, setData] = useState([]);

我的主要问题是，当我简单地记录返回的数据时，无论我刷新浏览器多少次，都会记录正确的数据。但是，一旦我包含一个映射来渲染数据，它第一次只显示，，然后我得到一个错误

无法读取null的属性“map”

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

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>
    )
}

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} />)

---

问题是您正在以异步方式请求数据，所以第一次，它返回为

null

，然后您尝试映射到

null

。 e、 g.这里您的数据最初为

null

const [data, setData] = useState(null);

console.log

有时可能会向您显示变量的当前状态，所以不要被它欺骗

因此，在映射之前，可以设置如下条件：

data && data.map....

---

或者使用空数组作为初始值

您可以通过在

useFetch.js

文件中使用空数组初始化数据状态来修复它

const [data, setData] = useState([]);

或者在另一个文件中，即

const [data = [], loading, error] = useFetch("http://localhost:8080/products");

---

试试

data？.map

非常感谢！这很有效。我刚刚使用了另一个答案，因为我决定不将状态初始化为null，而是包含一个空数组。

const [data = [], loading, error] = useFetch("http://localhost:8080/products");