javascript - 无法读取 null 的属性 'map'

Question

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

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

Cannot read property 'map' of null

当我只记录数据时，简单场景中的故障:

产品.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 以包含 map 并显示如下

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

就其值(value)而言，我的 DisplayTable.js 函数如下所示:

import React from "react"

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

export default DisplayTable

Answer 1

您可以通过在 useFetch.js 文件中使用空数组初始化数据状态来修复此问题

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

或在其他文件中，即

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