在 JSON 上循环时"TypeError: Cannot read property 'name' of undefined"

Question

我有一个JSON，如下所示：

{
"cards": [
{
"name": "aquaman",
"img": "aquaman.png"
},
{
"name": "batman",
"img": "batman.png"
},
{
"name": "captainamerica",
"img": "captainamerica.png"
},
{
"name": "deadpool",
"img": "deadpool.png"
},
{
"name": "flash",
"img": "flash.png"
},
{
"name": "greenlantern",
"img": "greenlantern.png"
},
{
"name": "ironman",
"img": "ironman.png"
},
{
"name": "spiderman",
"img": "spiderman.png"
},
{
"name": "ironfist",
"img": "ironfist.png"
},
{
"name": "thepunisher",
"img": "thepunisher.png"
},
{
"name": "wonderwoman",
"img": "wonderwoman.png"
},
{
"name": "xman",
"img": "xman.png"
}
]
}

我想在这些对象上循环，并用每个对象的img属性的backgroundImage来渲染div

我试过这个，但它告诉我：

TypeError:无法读取未定义的属性"name">

import React, { useEffect, useState } from "react";
import cardsJson from "../../../utils/cards.json";
const [cards, setCards] = useState();
useEffect(() => {
setCards(cardsJson.cards);
}, [cards]);
{cards &&
cards.map((card: any, index: number) => (
<div key={card.name} className="cardHero">
<div className="front"></div>
<div
className="back"
style={{
backgroundImage: `url(${require(`../../../assets/images/${card.img}`)})`
}}
></div>
</div>
))}

看起来在地图里，我无法获得每张卡的名称或img？？当我控制台日志"cards"时，它会向我显示上面的JSON，其中包含名称和img属性

Answer 1

假设您的代码被封装在一个函数组件中(见下文(，那么您导入/使用cards.json的方式可能会有问题。此外，在useEffect中，使依赖数组[]而不是[cards]。我把你的代码改成了这个，它起作用了：

import React, { useEffect, useState } from "react";
import cardsJson from "./cards.json";

export function Cards() {
const [cards, setCards] = useState();
useEffect(() => {
console.log(cardsJson);
setCards(cardsJson.cards);
}, []);
return (
<div>
{
cards &&
cards.map((card, index) => (
<div key={card.name} className="cardHero">
<div className="front">{card.name}</div>
<div
className="back"
></div>
</div>
))
}
</div>
);
}

注意，我把cards.json和cards组件放在同一个文件夹中，我没有输出图像，我更新了依赖数组。

Answer 2

如果你只想显示卡片，那么它们没有理由在useEffect中。我建议您创建一个常量并用cardsJson.cards初始化它，比如：

const cards = cardsJson.cards;

或者，如果你想玩状态游戏，只需使用cardsJson.cards初始化你的状态，比如：

const [cards, setCards] = useState(cardsJson.cards);