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中的每個元素。