如何在ReactJS中渲染嵌套对象数组内的tchStudents并解决对应报错

报错根因 #

你遇到的报错核心是两个问题：

• 直接在JSX的{}中渲染了完整的学生对象，React仅支持渲染字符串、数字等基础类型值或合法的React元素，不支持直接渲染对象
• 遍历tchStudents的逻辑有误，要么多了一层无意义的遍历导致返回嵌套数组，要么没有取到正确的学生属性渲染

解决方案 #

如果你的tchStudents是存储学生对象的一维数组（从你给出的Schema描述看大概率是这个结构），直接遍历该数组即可：

const { tchID, tchFirstName, tchLastName, tchStudents } = teacher; 

<tbody>
  <tr>
    <td>{tchID}</td>
    <td>{tchFirstName}</td>
    <td>{tchLastName}</td>
    <td>
      {/* 直接遍历学生数组，注意加唯一key属性 */}
      {tchStudents.map(student => (
        <p key={student._id}>{student.stdID}</p>
      ))}
    </td>
  </tr>
</tbody>

如果tchStudents确实是外层用对象包裹多组学生数组的嵌套结构，需要用flatMap扁平化遍历结果避免返回嵌套数组：

<td>
  {Object.keys(tchStudents).flatMap(groupKey => 
    tchStudents[groupKey].map(student => <p key={student._id}>{student.stdID}</p>)
  )}
</td>

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