在 object 上循环/映射/迭代导致无法读取未定义的属性（读取“映射”）错误，但存在数据

Question

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

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

TypeError：无法读取未定义的属性（读取“地图”）
在面包屑头

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

此外，如果我注释掉地图/循环，则页面加载时数据的 rest 会正确显示。 然后，如果我取消注释并保存文件，则地图/循环的数据现在可以正确显示。

我只能假设代码在加载之前尝试渲染循环的内容。

组件的代码如下所示：

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

您正在尝试在获取 map 数据之前对其进行处理，因此它是一个空数组（breadCrumbData 状态的初始值）。 您应该使用可选链接：

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

Answer 2

您正在尝试在 state 更改之前对您的数组进行 map，useEffect 在第一次渲染时被调用，您的数组没有 state 之类的东西，例如在第一次渲染中可以使用加载钩子，

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

这只是一个小例子，你可以怎么做