React无法渲染MongoDB $lookup关联数据：Objects are not valid as a React child错误及progress字段访问问题

问题场景 #

我在后端用MongoDB的$lookup聚合查询关联了两个集合，Postman能正常返回包含progress数组的结果，但在React应用里尝试渲染progress内的字段时，遇到了错误提示：Objects are not valid as a React child - having to access to two children。我能访问check里的员工基本信息，但没法拿到progress里的元素。

后端代码（Node.js + Express）

router.get("/employeepoints", (req, res) => { 
  let empno = req.params.name; 
  employees.aggregate([{ 
    $lookup: { 
      from:"assignment_assignedtostaffs", 
      localField:"empno", 
      foreignField:"emp_no", 
      as:"progress" 
    }
  } ]) 
  .exec((err, check) => { 
    var l = check.length; 
    return res.status(200).json({ 
      success: true, 
      check: check, 
      l: l, 
    }); 
  }); 
});

Postman返回的响应数据

{ 
  "success": true, 
  "check": [ 
    { 
      "_id": "6138f90bcf5f00948da795bb", 
      "empno": 69, 
      "name": "Nandasena", 
      "progress":[ 
        { 
          "_id": "6139a1336d16d204cc9b7504", 
          "assignment_name": "Assignment2", 
          "client_no": "clie3", 
          "execid": "exec20", 
          "place_of_engagement": "California", 
          "distance": 4, 
          "date_of_allocation": "2021-09-02T00:00:00.000Z", 
          "deadline": "2021-09-18T00:00:00.000Z", 
          "emp_no": 69, 
          "progress": "Working", 
          "__v": 0, 
          "travel_allowance": 350 
        } 
      ] 
    } 
  ] 
}

我的React渲染代码（报错部分）

<tbody class="tbody1"> 
  {this.state.employee.map((employees, index) => ( 
    <tr key={index}> 
      <td> 
        <a href={``} style={{ textDecoration: "none" }}> 
          {employees.empno} 
        </a> 
      </td> 
      <td>{employees.name}</td> 
      <td>{employees.email}</td> 
      <td>{employees.commencement_date}</td> 
      <td>{employees.progress.distance}</td> {/* 这里出错！ */}
      <td>1</td> 
    </tr> 
  ))} 
</tbody>

问题根源 #

仔细看Postman的返回结果就能发现：progress是一个数组类型（被[]包裹），而你在React代码里把它当成了单个对象去访问employees.progress.distance。这会导致两个问题：

1. 直接访问数组的distance属性会得到undefined；
2. 如果不小心直接渲染employees.progress（比如写了{employees.progress}），React会抛出“Objects are not valid as a React child”的错误——因为React不能直接渲染数组/对象作为子元素，必须把它们转换成字符串、JSX元素等可渲染的类型。

解决方案 #

根据你的业务场景，分两种情况处理：

情况1：每个员工只有1条progress数据（如示例）

直接取数组的第一个元素，同时加上空值判断避免数组为空时报错：

<tbody className="tbody1"> {/* 注意React里用className而不是class */}
  {this.state.employee.map((employee, index) => ( 
    <tr key={employee._id}> {/* 尽量用唯一ID当key，比index更可靠 */}
      <td> 
        <a href="" style={{ textDecoration: "none" }}> 
          {employee.empno} 
        </a> 
      </td> 
      <td>{employee.name}</td> 
      <td>{employee.email || '无邮箱信息'}</td> {/* 处理字段缺失的情况 */}
      <td>{employee.commencement_date || '无入职日期'}</td> 
      <td>
        {/* 用可选链操作符?.避免数组为空时报错，同时提供默认值 */}
        {employee.progress[0]?.distance || '无距离数据'}
      </td>
      <td>1</td> 
    </tr> 
  ))} 
</tbody>

情况2：每个员工有多条progress数据

如果一个员工对应多个进度项，需要用map遍历progress数组，渲染多个子元素：

<tbody className="tbody1">
  {this.state.employee.map((employee, empIdx) => ( 
    <React.Fragment key={employee._id}>
      <tr>
        <td> 
          <a href="" style={{ textDecoration: "none" }}> 
            {employee.empno} 
          </a> 
        </td> 
        <td>{employee.name}</td> 
        <td>{employee.email || '无邮箱信息'}</td> 
        <td>{employee.commencement_date || '无入职日期'}</td> 
        <td>
          {/* 遍历progress数组，渲染每个distance */}
          {employee.progress.length > 0 ? (
            employee.progress.map((prog, progIdx) => (
              <span key={prog._id}>{prog.distance}{progIdx !== employee.progress.length-1 ? ', ' : ''}</span>
            ))
          ) : '无距离数据'}
        </td>
        <td>{employee.progress.length}</td> {/* 显示进度项数量 */}
      </tr>
    </React.Fragment>
  ))} 
</tbody>

额外注意事项 #

1. React的class属性：React里要用className代替原生HTML的class，否则会有警告；
2. key的选择：尽量用数据里的唯一标识（比如_id）作为key，不要用循环的index——当数组元素顺序变化时，index作为key会导致React渲染异常；
3. 异步数据加载：确保在渲染前this.state.employee已经被正确赋值（比如初始值设为空数组[]，避免map调用在undefined上）；
4. 可选链操作符：?.是ES2020的语法，如果你的项目不支持，可以用条件判断替代：employee.progress.length > 0 ? employee.progress[0].distance : '无数据'。

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