React渲染表格报v.employee.map is not a function错误如何解决

你遇到的报错：

react-dom.development.js:26874 Uncaught TypeError: v.employee.map is not a function

触发原因非常直接：

• .map()是JavaScript数组原型上的内置遍历方法，只能在数组类型的数据上调用
• 对照你提供的JSON示例数据，v.employee是一个普通的单层对象，不是数组类型，本身不存在map方法，强行调用就会抛出类型错误。

根据实际业务场景选择对应写法即可：

场景1：单车辆对应1位员工（和你当前的JSON结构完全匹配） #

这种场景不需要调用map，直接读取employee对象的属性渲染即可，修正后的代码如下：

<tbody>
  {
    vehicles.map((v, index) =>(
      <tr key={v.id}>
        <td>{index +1}</td>
        <td>{v.type}</td>
        <td>{v.plateNumber}</td>
        <td>
          <ul>{v.employee?.name}</ul>
        </td>
        {/* 如果需要渲染员工部门、位置等其他字段，新增对应td即可
        <td>{v.employee?.department}</td>
        <td>{v.employee?.location}</td>
        */}
        <td>
            <Link className="btn btn-info" to={`/vehicles/edit/${v.id}`}>Update</Link>
            <button className="btn btn-danger ml-2" onClick={() => {deleteSweetAlert(v.id)}}>Delete</button>
        </td>
      </tr>
    ))
  }
</tbody>

代码里加了可选链操作符?.做兜底，避免个别车辆数据缺失employee字段时，出现读取undefined属性的次生报错。

场景2：单车辆对应多位员工（employee字段为数组结构） #

如果后续接口返回的employee是员工数组格式，建议增加类型判断做兼容，避免接口返回格式异常时整页崩溃：

<tbody>
  {
    vehicles.map((v, index) =>(
      <tr key={v.id}>
        <td>{index +1}</td>
        <td>{v.type}</td>
        <td>{v.plateNumber}</td>
        {/* 先判断数据类型，数组走map遍历，单对象走单条渲染做兼容 */}
        {Array.isArray(v.employee) ? 
          v.employee.map(item => {
            return (
              <td key={item.id}>
                <ul>{item.name}</ul>
              </td>
            );
          }) : (
            <td>
              <ul>{v.employee?.name}</ul>
            </td>
          )
        }
        <td>
            <Link className="btn btn-info" to={`/vehicles/edit/${v.id}`}>Update</Link>
            <button className="btn btn-danger ml-2" onClick={() => {deleteSweetAlert(v.id)}}>Delete</button>
        </td>
      </tr>
    ))
  }
</tbody>

注意：循环渲染列表元素时必须给最外层节点加唯一key属性，你之前写的map循环里td标签没有加key，会触发React的渲染警告，这里补上了用员工id作为key值。

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