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

我遇到的问题是，当我试图在我的组件中呈现BreadCrumbLinks属性时，我得到了这个错误：
TypeError：无法读取未定义的属性（阅读“map”）
关于BreadCrumbHeader
我得到了一个“Undefined”错误，但我知道数据是存在的，因为我可以读取和呈现所有其他字段（例如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-prefix-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;

有谁能解释一下这里发生了什么以及如何解决i？