我试图通过数组中的trueDesc
进行Map,但出现了这个错误。
act-refresh-runtime.development.js:315 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
我有几张卡片,我根据过滤选项Map它们,它工作得很好,但当Map通过trueDesc属性时发生错误。
const Plans = () => {
const [selectedTag, setSelectedTag] = useState("");
const cards = [
{
id: 1,
title: "tag1",
tags: ["tag2"],
price: 1050,
num1: 4,
num2: 4,
pricesec1: 188,
pricesec2: 200,
trueDesc: [
"firstdesc",
"seconddesc",
"thirddesc",
"",
],
time: 5,
},
{ id: 2, title: "tag1", tags: ["tag1"] },
];
const filteredCards =
selectedTag === ""
? cards
: cards.filter((card) => card.tags.includes(selectedTag));
return (
<section className="cartTypeSubSection">
<div class="buttonplan-container">
<button class="buttonPlan" onClick={() => setSelectedTag("tag1")}>
tag1
</button>
<button
class="buttonPlan"
onClick={() => setSelectedTag("tag2")}
>
tag2
</button>
</div>
<div class="card-container">
{filteredCards.map((card) => (
<div key={card.id} className="card customcard1">
<div className="card-overlay">
<h3 className="cardTitle">{card.title}</h3>
<div className="price">
<span className="priceNum">{card.price}</span>
</div>
<div class="priceList">
<p className="priceListItem">
<span>{card.num1}</span>
<strong className="priceCrrStrong">
{card.pricesec1}
</strong>
</p>
</div>
<div class="priceList">
<p className="priceListItem">
{card.num2}
<strong className="priceCrrStrong ">
{card.pricesec2}
</strong>
</p>
</div>
<div className="plandesriptionContainer">
<span className="plandesription">
{card.trueDesc.map((item) => (
<>
<AiOutlineCheck
style={{
color: "green",
verticalAlign: "middle",
marginLeft: "0.5rem",
}}
/>
<span></span>
</>
))}
</span>
<span className="plandesription">
<span>
<RxCross2
style={{
color: "red",
verticalAlign: "middle",
marginLeft: "0.5rem",
}}
/>
</span>
معالجة طلاء(تبهيت)
</span>
</div>
<div>
<span className="plandesription planTime">
<span className="planTimeIcon">
<BiTimeFive
style={{ color: "white", marginLeft: "0.5rem" }}
/>
</span>
5 ساعات عمل
</span>
</div>
<button class="button-57" role="button">
<span class="text" className="planBtn">
choose
</span>
</button>
</div>
</div>
))}
</div>
</section>
);
};
export default Plans;
1条答案
按热度按时间sgtfey8w1#
这是因为
cards
数组中的第二个对象没有trueDesc
属性:在尝试访问该属性之前,请考虑执行
if
检查: