Реагирует на функцию карты: как вывести содержимое всех вложенных массивов одновременно?

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

Используя существующую структуру данных, вы можете использовать синтаксис 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 2

Здравствуйте, Overwatch player:)

Если вы хотите перебрать ключи объекта, вы можете использовать метод 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 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
}