嵌套对象遍历无法渲染Avatar组件的技术问题

问题根源 #

你嵌套map里的内层函数用了**大括号{}**包裹逻辑，但没有显式返回<Avatar>组件。React中，箭头函数如果用大括号定义函数体，必须手动写return才能返回JSX元素；如果是小括号()，则会自动返回括号内的表达式——这就是单个map能正常渲染、嵌套map不行的核心原因。

错误代码分析 #

你的嵌套map代码：

{
  teacher.map((thr) =>
    thr.students.map((stu) => {
      <Avatar color="red" key={stu.id} component={Link} to="/complete">
        {stu.studentName}
      </Avatar>;
    })
  )
}

内层map的箭头函数用了大括号，却没有return语句，实际返回undefined，React无法渲染任何内容。

两种修复写法 #

写法一：改用小括号自动返回 #

直接把内层函数的大括号换成小括号，箭头函数会自动返回括号里的JSX：

{
  teacher.map((thr) =>
    thr.students.map((stu) => (
      <Avatar color="red" key={stu.id} component={Link} to="/complete">
        {stu.studentName}
      </Avatar>
    ))
  )
}

写法二：保留大括号，添加显式return #

如果需要在函数体内加其他逻辑，保留大括号的同时必须写return：

{
  teacher.map((thr) =>
    thr.students.map((stu) => {
      // 可在此添加额外逻辑，比如打印学生信息
      console.log(stu);
      return (
        <Avatar color="red" key={stu.id} component={Link} to="/complete">
          {stu.studentName}
        </Avatar>
      );
    })
  )
}

额外优化：避免Key冲突 #

外层teacher.map建议添加唯一key，同时内层key结合外层标识（比如老师索引），防止不同老师下的学生id重复导致React警告：

{
  teacher.map((thr, idx) =>
    thr.students.map((stu) => (
      <Avatar color="red" key={`teacher-${idx}-student-${stu.id}`} component={Link} to="/complete">
        {stu.studentName}
      </Avatar>
    ))
  )
}

内容的提问来源于stack exchange，提问作者dave_bell