React组件渲染axios返回数据时报startup.map is not a function错误如何解决

错误原因 #

• 核心问题是你调用setstartups时传入的不是数组，导致startup状态最终是对象类型，对象没有map方法才会抛出该错误。
• 从你给出的接口返回结构可以看到：后端返回的外层是一个对象，真实的列表数据被包裹在data字段中。而axios请求返回的response.data已经是后端返回的完整外层对象，你直接把这个对象赋值给了状态，没有取出内层的数组。
• 额外存在字段不匹配问题：你组件中使用的startups.image字段，接口返回的对应字段名是card_image，后续渲染也会出现异常。

1. 修正状态赋值逻辑 #

修改retrieveTutorials方法里的取值逻辑，从后端返回的对象中取出真实的列表数组：

const retrieveTutorials = () => {
  StartUpService.getAll()
    .then((response) => {
      // 多取一层data，拿到内层的数组
      const myData = response.data.data;
      setstartups(myData);
      console.log(myData);
    })
    .catch((e) => {
      console.log(e);
    });
};

2. 修正字段匹配 #

调整CardComponent的传值，适配接口返回的字段名：

<CardComponent
  className="cards"
  key={startups.id}
  id={startups.id}
  // 替换为接口返回的card_image字段
  image={startups.card_image}
  header={startups.header}
  title={startups.title}
  category={startups.category}
  summary={startups.summary}
/>

3. 可选兼容优化 #

为了避免接口返回异常时页面直接崩溃，可以在调用map前加类型校验：

{Array.isArray(startup) && startup.map((startups) => (
  // 原有渲染逻辑
))}

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