无法读取 null 的属性“地图”答案

【问题标题】：Cannot read property 'map' of null无法读取 null 的属性“地图”
【发布时间】：2021-05-11 11:22:29
【问题描述】：

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

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

无法读取 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>
    )
}

那时，我明白了

无法读取 null 的属性“地图”

不管怎样，我的 DisplayTable.js 函数看起来像：

import React from "react"

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

export default DisplayTable

【问题讨论】：

试试data?.map

标签： javascript reactjs react-native react-hooks

【解决方案1】：

问题是你正在以异步方式请求数据，所以第一次它返回为null，然后你尝试映射null。例如这里你的数据最初是null

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

console.log 有时可能会显示变量的当前状态，所以不要被它欺骗。

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

data && data.map....

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

【讨论】：

非常感谢！这行得通。我刚刚选择了另一个答案，因为我决定不将状态初始化为 null 并包含一个空数组。

【解决方案2】：

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

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

或在其他文件中，即

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

【讨论】：