React渲染Mongoose populate关联ObjectId字段出现无效子元素错误问询

我遇到的报错内容为：Objects are not valid as a React child . If you meant to render a collection of children, use an array instead，具体场景如下：

后端代码部分 #

教师模型Schema定义 #

tchStudents: [{
  type: Schema.Types.ObjectId, 
  ref: "Student"
}]

关联查询代码（使用mongoose-paginate） #

const options = {
  select:  'tchID tchFirstName tchLastName tchStudents',
  sort:     { date: -1 },
  populate: 'tchStudents',
};

try {
  const tchID = await Teacher.paginate(req.query.tchID ? {tchID: req.query.tchID} : 
  {}, {limit, page, skip, options})
                       
  return res.status(200).json({
     success: true,
     data: tchID
  })

} catch(err){
  console.log(err);
}

前端React渲染代码 #

我需要在React中渲染返回的、已经完成populate的Schema.ObjectID类型字段，渲染代码如下：

<td>{enNum}</td>
<td>{enSclYear}</td>
<td>{enGrade}</td>
<td>{enSection}</td>
<td><Moment format="YYYY/MM/DD">{enDate}</Moment></td>
<td>{enStudent}</td> // 该字段为schema.ObjectId类型且已做populate关联，我想要渲染该字段内容
<td>
<Link 
   to={`/showEnroll/${enroll._id}`}
>
<Button
   tooltip="Edit Student"
   tooltipOptions={{
      position: 'left'
   }}
   className="btn blue darken-4"
>
<i className="material-icons center">create</i>
</Button>
</Link>
</td>

目前渲染enStudent字段时触发上述报错，该如何正确渲染关联字段内容？

报错原因 #

经过populate处理后的enStudent是完整的Student对象/对象数组，React不支持直接将对象作为子元素渲染，必须指定要渲染的对象具体属性。

具体解决方法 #

1. 如果关联的是单个学生对象，直接指定要渲染的Student模型字段即可，比如要渲染学生姓名，假设Student模型中姓名字段为stuName，修改代码如下：

// 加可选链操作符?.避免数据未加载完成时访问属性报错
<td>{enStudent?.stuName}</td>

如果需要直接输出ObjectId的字符串值，访问_id属性即可：

<td>{enStudent?._id?.toString()}</td>

2. 如果关联的是多个学生（根据你的Schema定义tchStudents是数组类型），需要遍历数组输出对应字段，比如渲染所有学生姓名用逗号分隔：

<td>
  {enStudent?.map(stu => stu.stuName).join('，')}
</td>

如果需要给每个学生加单独的样式/交互，用map返回元素节点即可：

<td>
  {enStudent?.map(stu => <span key={stu._id} className="student-item">{stu.stuName}</span>)}
</td>

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