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

Question

我的数据是一个带有键值对的对象，然后是一些带有字符串的数组(“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阵有技能？

Answer 1

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

如果你想循环一个对象的键，你可以使用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:您的数据对象格式不正确。最好有另一个名为“技能”的字段并循环它们