Lopping/Map/Itterating through object 导致 Cannot read properties of undefined (reading 'map') 错误，但数据存在

Question

我有一个从 API 端点获取数据的反应组件。为了在我调用 API 时进行调试，我将 API 调用的结果记录到控制台，它看起来像这样：

我遇到的问题是，当我尝试在我的组件中呈现 BreadCrumbLinks 属性时，出现此错误：

TypeError: Cannot read properties of undefined (reading 'map') at BreadCrumbHeader

所以我收到一个未定义的错误，但我知道数据存在，因为我可以读取和呈现所有其他字段。（例如 BreadCrumbBgImage）

此外，如果我注释掉 map/loop，其余数据将在页面加载时正确显示。然后，如果我取消注释并保存文件，map/loop 的数据现在会正确显示。

所以我只能假设代码在加载之前尝试呈现循环的内容。

组件的代码如下所示：

import React, { useState, useEffect } from 'react';
import API from "../../API";
import { useLocation } from 'react-router-dom';
import { BreadCrumbTitleSection, SubtitleSection, Subtitle } from './breadCrumbHeaderStyle';
import { Breadcrumb } from 'react-bootstrap';

function BreadCrumbHeader() {
    const location = useLocation();

    const [breadCrumbData, setBreadCrumbData] = useState([]);

    const getBreadCrumbData = async () => {
        const breadCrumbHeaderResponse = await API.fetchBreadCrumbHeader(location.pathname);
        setBreadCrumbData(breadCrumbHeaderResponse);

        console.log("OUT-PUT-OF-API-CALL");
        console.log(breadCrumbHeaderResponse);
        console.log("END-OF-OUT");

    };

    useEffect(() => {
        getBreadCrumbData();
    }, [location.pathname]);

    return (
        <div>

            <BreadCrumbTitleSection backgroundUrl={breadCrumbData.BreadCrumbBgImage}>
                <div className="container">
                    <div className="row no-gutters">
                        <div className="col-xs-12 col-xl-preffix-1 col-xl-11">
                            <h1 className="h3 text-white">{breadCrumbData.BreadCrumbTitle}</h1>
                            <Breadcrumb>
                                {breadCrumbData.BreadCrumbLinks.map(breadCrumbLink => (
                                    <Breadcrumb.Item href={breadCrumbLink.LinkUrl} key={breadCrumbLink.Id} active={breadCrumbLink.IsActive}>
                                        {breadCrumbLink.LinkText}
                                        </Breadcrumb.Item>
                                ))}
                            </Breadcrumb>
                    </div>
                </div>
            </div>
            </BreadCrumbTitleSection>
            <SubtitleSection>
                <Subtitle> {breadCrumbData.SubTitle}</Subtitle>
            </SubtitleSection>
     </div>
    );
}
export default BreadCrumbHeader;

谁能解释一下这是怎么回事，我该如何解决？

Answer 1

您试图在获取数据之前映射数据，因此它是一个空数组（breadCrumb 数据状态的初始值）。您应该使用可选链接：

 {breadCrumbData?.BreadCrumbLinks?.map(breadCrumbLink =>

Answer 2

您正在尝试在状态更改之前映射您的数组，在第一次渲染时调用 useEffect，您的数组在第一次渲染时没有状态，您可以使用加载挂钩之类的东西，像这样

      const [loading, setLoading] = useState(false)
    useEffect(() =>{
        setLoading(true)
        fetchData()
    },[])
    const fetchData = () =>{
        //my api call
        setLoading(false)
    }
    return (
        {loading ? (
            // my loading message or function
        ): (
            // my show component 
        )}
    )

这只是一个小例子

Lopping/Map/Itterating through object 导致 Cannot read properties of undefined (reading 'map') 错误，但数据存在

Lopping/Map/Itterating through object results in Cannot read properties of undefined (reading 'map') error, but data is present

javascript

reactjs

react-component