gpt4 book ai didi

javascript - react map 函数: how to output content of all nested arrays at once?

转载 作者:行者123 更新时间:2023-11-28 11:44:21 25 4
gpt4 key购买 nike

我的数据是一个带有键值对的对象,然后是一些带有字符串的数组(“skill_1”和“skill_2”):

const HeroDescriptions = [
{
id: "ana",
name: "Ana",
role: "Support",
skill_1: [
"Biotic Rifle",
"Damage: 70",
"Healing: 75"
],
skill_2: [
"Biotic Grenade",
"Damage: 60",
"Healing: 100"
]
}
]

我将其输出到 JSX,如下所示:

const content = description.map(item => (
<div key={item.id}>
<h1>{item.name}</h1>
<h2>Role: {item.role}</h2>
<hr />
<ul>
{description[0].skill_1.map((skill, index) => (
<li key={index}>{skill}</li>
))}
</ul>
</div>
));

return (
<div>
<ul>{content}</ul>
</div>
);
};

我想修改此代码片段:

{description[0].skill_1.map((skill, index) => (
<li key={index}>{skill}</li>

我如何循环遍历所有嵌套的技能数组,以便我的代码可以重用并且可以工作,如果有例如4阵有技能?

最佳答案

《守望先锋》玩家大家好:)

如果你想循环一个对象的键,你可以使用Object.keys方法,描述为here

您的代码块将变为:

Object.keys(item)
.filter(key => ['id', 'name', 'role'].indexOf === -1)) // filter out unrelated keys
.map(skillKey => item[skillKey])
.map(skillArr => <li key={skillArr[0]}>{skillArr.join(', ')}</li>)

P.S:您的数据对象格式不正确。最好有另一个名为“技能”的字段并循环它们

关于javascript - react map 函数: how to output content of all nested arrays at once?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55866074/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com