React遍历API返回数据报错：TypeError: activeJobs.data.map is not a function

这个错误的核心原因很直白：你尝试在非数组类型的值上调用map方法。咱们一步步拆解问题，找到修复方案：

1. 先搞清楚数据结构的矛盾点 #

你的初始状态activeJobs被设为数组[]，但后续通过setActiveJobs(data)把API返回的JSON对象直接赋值给了它，这就造成了前后结构不匹配：

• 初始加载阶段：activeJobs是数组，activeJobs.data为undefined，此时显示"Loading..."是正常的
• API返回数据后：activeJobs变成了API返回的对象，如果这个对象里的data字段不是数组（比如是单个对象、或者API返回的结构根本不符合预期），调用map就会直接报错。

另外还有个常见坑：如果你的getAllActiveJobs是基于axios这类库封装的，它返回的响应对象本身就包含data字段（比如axios响应格式是{ data: 实际业务数据 }），这时候你直接把整个响应对象赋值给activeJobs，就会导致activeJobs.data才是你真正需要的内容，但如果这部分内容不是数组，依然会报错。

2. 具体修复步骤 #

第一步：先确认API返回的真实结构 #

先在init方法里加个打印，搞清楚数据到底长什么样：

const init = () => {
  getAllActiveJobs().then((data) => {
    console.log("API返回的原始数据：", data); // 打印出来看清楚结构
    setActiveJobs(data);
  })
}

根据打印结果，对应不同的修复方式：

情况1：API返回的是包含数组的对象（比如{ data: [{}, {}, ...] }）

这时候你需要把数组部分单独提取出来存到状态里：

const init = () => {
  getAllActiveJobs().then((response) => {
    // 把响应里的数组数据存到状态
    setActiveJobs(response.data);
  })
}

然后渲染时直接遍历activeJobs即可：

return (
  <Layout>
    {activeJobs.length > 0 ? activeJobs.map((item) => {
      return <div key={item.jobId}>{item.candidateId}</div>
    }) : "Loading..."}
  </Layout>
)

情况2：API返回的直接就是数组（比如[{}, {}, ...]）

那你之前错误地去访问activeJobs.data，直接修改渲染逻辑即可：

return (
  <Layout>
    {activeJobs.length > 0 ? activeJobs.map((item) => {
      return <div key={item.jobId}>{item.candidateId}</div>
    }) : "Loading..."}
  </Layout>
)

情况3：API返回的data是单个对象（不是数组）

这种情况不能用map，要么直接渲染单个对象的内容，要么把它放进数组里再处理：

// 把单个对象转成数组存入状态
const init = () => {
  getAllActiveJobs().then((data) => {
    setActiveJobs([data.data]);
  })
}

3. 额外的安全防护 #

为了避免类似类型错误，你可以在渲染时做更严谨的类型校验，比如用Array.isArray()确认：

return (
  <Layout>
    {Array.isArray(activeJobs.data) ? activeJobs.data.map((item) => {
      return <div key={item.jobId}>{item.candidateId}</div>
    }) : "Loading..."}
  </Layout>
)

不过更推荐的还是先把状态调整为匹配的数据结构，这样代码会更清晰易维护。

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