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

Question

My data is an object with key value pairs and then some arrays ("skill_1" and "skill_2") with strings:

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

I output this to JSX like that:

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

I would like to modify this snippet:

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

How could I loop through all nested skill arrays, so that my code would be reusable and would work, if there were eg 4 arrays with skills?

Answer 1

Hello fellow Overwatch player :)

If you want to loop over keys of an object, you can use Object.keys method which is described here

Your code block would become:

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: You data object is not well formed. It would be better to have another field called 'skills' and loop over them

Answer 2

Using your existing data structure, you can use spread syntax to capture the skills together, and then using the getSkills method, reduce over each object's values to combine the arrays, and then map over that set to produce your final list of skills.

 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

You may extract skill_x properties into array:

 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; } 

And I agree with above comments, reformatting those properties into something, like below, would make more sense:

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