Unhandled Runtime Error TypeError: subSector.map is not a function

Question

我无法映射来自假 api 的 json 数据。它在返回多个数据时有效，但当数据是单个对象时会发生此错误。

这是我的代码：

    {subSector
     ? subSector.map((sector) => (
//               ^ ~ subSector.map is not a function
         <MenuItem value={sector.id}>{sector.email}</MenuItem>
       ))
    : "nodata"}

Answer 1

通过在 subSector 上使用 map，您假设它是一个项目数组而不是单个项目。

您看到错误是因为 subSector 不是数组，因此 map 函数不可用。

而是直接访问 subSector 属性（假设 subSector 是单个项目）：

    {subSector ? (
         <MenuItem value={subSector.id}>{subSector.email}</MenuItem>
       )
    : "nodata"}

或处理数组或单个项目的两种情况：

    {Array.isArray(subSector)
     ? subSector.map((sector) => (
         <MenuItem value={sector.id}>{sector.email}</MenuItem>
       ))
    : subSector ? (
         <MenuItem value={subSector.id}>{subSector.email}</MenuItem>
       ) 
    : "nodata"}

或者，正如 catgirlkelly 所说，确保你的假数据总是 returns 一个数组，即使是单个项目也是如此。

Unhandled Runtime Error TypeError: subSector.map is not a function

Unhandled Runtime Error TypeError: subSector.map is not a function

javascript

reactjs

next.js