循环/映射/迭代对象导致无法读取未定义(读取'map')错误的属性，但存在数据
我有一个从API端点获取数据的react组件。为了调试的目的，当我调用API时，我将API调用的结果记录到控制台，它看起来如下所示：
我遇到的问题是，当我试图在组件中呈现BreadCrumbLinks属性时，会得到以下错误：
TypeError:无法读取未定义的属性(读取“映射”)
在BreadCrumbHeader
我得到了一个“未定义”的错误，但是我知道数据是存在的，因为我可以读取和呈现所有其他字段(例如BreadCrumbBgImage)。
此外，如果我注释掉映射/循环，则在页面加载时将正确显示其余的数据。然后，如果我取消注释并保存文件，那么map/循环的数据就会正确显示。
我只能假设代码在加载之前试图呈现循环的内容。
组件的代码如下所示：
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;有人能解释一下这是怎么回事吗?我怎么能解决我？
回答 2
Stack Overflow用户
发布于 2022-06-02 14:06:01
您正在尝试在数据获取之前映射它，因此它是一个空数组( breadCrumbData状态的初始值)。您应该使用可选链接：
{breadCrumbData?.BreadCrumbLinks?.map(breadCrumbLink => Stack Overflow用户
发布于 2022-06-02 14:20:02
您是tryng来在状态更改之前映射您的数组，在第一个呈现时调用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
)}
)这只是一个简单的例子。
https://stackoverflow.com/questions/72476716
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号