如何在 React.js 中显示嵌套列表？

Question

我有三个personSkills persons 、 skills和人员技能。 现在我想在一个无序的垂直列表中显示每个人的所有技能，就像这样

• 人1
  - 技能1
  - 技能2
• 人2
  - 技能3
  - 技能4

这是我的代码-

let persons = ["Person1", "Person2"];
let skills = ["Skill1", "Skill2", "Skill3", "Skill4"];

export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      personSkills: [
        { Person1: ["Skill1", "Skill2"] },
        { Person2: ["Skill3", "Skill4"] }
      ]
    };
  }

  render() {
    return (
      <div className="App">
        {persons.map((eachP) => (
          <ul>
            {eachP}

            {this.state.personSkills.map((eachPS) => {
              eachPS[eachP] && eachPS[eachP].map((eachS) => <li>{eachS}</li>);
            })}
          </ul>
        ))}
      </div>
    );
  }
}

但它只是显示

• 人1
  
  
• 人2

这是我的沙盒的链接 - 沙盒

请帮忙。

Answer 1

map function 需要返回语句。 因此，您需要将代码修改为类似

{this.state.personSkills.map((eachPS) => {
  return eachPS[eachP] && eachPS[eachP].map((eachS) => <li>{eachS}</li>);
})}

Answer 2

您可以简化存储技能的方式，如下所示：

this.state = {
      personSkills: {
        Person1: ["Skill1", "Skill2"],
        Person2: ["Skill3", "Skill4"]
      }
};

现在在渲染时：

render() {
    return (
      <div className="App">
        {persons.map((eachP) => (
          <ul>
            {eachP}
            {this.state.personSkills[eachP] && this.state.personSkills[eachP].map((skill) => {
              return <li>{skill}</li>;
            })}
          </ul>
        ))}
      </div>
    );
  }