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
}