react.js地图内的地图得到意想不到的标记

Question

class HelloWorld extends React.Component { 
    render() { 

    const arr = [{class:"A", students:[{name:'james'},{name:'john'}]}, 
{class:"B", students:[{name:'janice'},{name:'xena'}]}, 
{class:"C", students:[]}] 

    return (
     <div> 
     {arr.map(outer => 
    (outer.students.map(person => <p>{person.name}</p>)) 
)} 
     </div> 
    ); 
    } 
} 

得到预期的令牌使用2上图，任何线索？我想要构建这样的用户界面

Class A - james, john 
Class B - Janice, Xena 
Class C 

如果学生对象为空，则我无法显示C类。

Answer 1

这JSON是不是一个有效的JSON，你的B类对象后，错过了,：

const arr = [ 
    {class:"A", students:[{name:'james'},{name:'john'}]}, 
    {class:"B", students:[{name:'janice'},{name:'xena'}]}, 
    {class:"C", students:[]} 
] 

同时打印类名，你需要把它写这样的：

return (
    <div> 
     {arr.map(outer => 
      <div key={outer.class}> 
       {outer.class} - 
       {outer.students.map(person => <p key={person.name}>{person.name}</p>)} 
      </div> 
     } 
    </div> 
); 

别忘了将唯一密钥分配给map中的每个元素。