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

我想修改这个sn-p：

{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

您可以将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;
}

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

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

Answer 3

你好守望先锋玩家:)

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