React Map函数：如何一次输出所有嵌套数组的内容？

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> 

我如何遍历所有嵌套的技能数组，以使我的代码可以重复使用并可以工作，如果有四个带有技能的数组？

Answer 1

您好守望先锋玩家:)

如果要遍历对象的键，则可以使用此处描述的Object.keys方法

您的代码块将变为：

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>)

PS：您的数据对象格式不正确。 最好有一个名为“技能”的领域并遍历它们

Answer 2

使用现有的数据结构，可以使用spread语法将技能一起捕获，然后使用getSkills方法， reduce每个对象的值以组合数组，然后map到该集合以生成最终的技能列表。

 class App extends React.Component { getSkills(skills) { return Object.values(skills).reduce((acc, skillset) => { return [...acc, ...skillset]; }, []).map(skill => <li>{skill}</li>); } render() { const { descriptions } = this.props; return ( descriptions.map(params => { const { id, name, role, ...skills } = params; return ( <div key={id}> <h1>{name}</h1> <h2>Role: {role}</h2> <hr /> <ul> {this.getSkills(skills)} </ul> </div> ); }) ); } } const descriptions = [{"id":"ana","name":"Ana","role":"Support","skill_1":["Biotic Rifle","Damage: 70","Healing: 75"],"skill_2":["Biotic Grenade","Damage: 60","Healing: 100"]}]; ReactDOM.render( <App descriptions={descriptions} />, document.querySelector('#app') ); 

 .category { margin: 1em; } h1 { font-size: 1em; font-weight: 600; } h2 { font-size: 0.9em; font-weight: 600; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div> 

Answer 3

您可以将skill_x属性提取到数组中：

 const HeroDescriptions = [{ id: "ana", name: "Ana", role: "Support", skill_1: [ "Biotic Rifle", "Damage: 70", "Healing: 75" ], skill_2: [ "Biotic Grenade", "Damage: 60", "Healing: 100" ] } ]; ({id, name, role, ...skills} = HeroDescriptions[0]); console.log(Object.values(skills)); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

我同意上面的评论，将这些属性重新格式化为如下所示的内容会更有意义：

{
    skill: 'Biotic Rifle',
    damage: 70,
    Healing: 75
}