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

我有三个数组

人员

，

技能

和

人员技能

。现在我想在一个无序的垂直列表中显示每个人的所有技能，如下所示

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

让persons=[“Person1”、“Person2”]；
让技能=[“技能1”、“技能2”、“技能3”、“技能4”]；
导出类应用程序扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
人员技能：[
{Person1:[“Skill1”，“Skill2”]}，
{Person2:[“Skill3”，“Skill4”]}
]
};
}
render（）{
返回(
{persons.map（（eachP）=>(

{eachP}
{this.state.personSkills.map（（eachPS）=>{
eachPS[eachP]&&eachPS[eachP].map（（eachS）=>
{eachS}
）；
})}

))}
);
}
}

但它只是显示

• 人1
  
  
• 人2

这是我的沙箱的链接-

---

请提供帮助。

映射函数需要返回语句。 因此，您需要将代码修改为

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

{this.state.personSkills.map（（eachPS）=>{
返回eachPS[eachP]&&eachPS[eachP].map（（eachS）=>
{eachS}
）；
})}

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

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

render（）{
返回(
{persons.map（（eachP）=>(

{eachP}
{this.state.personSkills[eachP]&&this.state.personSkills[eachP].map（（技能）=>{
返回
{skill}
；
})}

))}
);
}