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张地图得到预期的令牌，任何线索？我想构建一个这样的UI

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内的每个元素分配唯一键。

地图内的react.js地图得到了意外的令牌

1 个答案: