React.ts中从对象数组获取API数据的问题求助

问题1：fictions.map is not a function 错误 #

原因 #

你调用的API返回的是包含数组的对象，而非直接返回数组。当前代码直接将response.data赋值给状态，但response.data是整个响应对象（结构类似{code: 200, data: [小说列表数据]}），因此fictions是对象，不具备map方法。

修复方案 #

修改API请求类，提取响应对象中的数组部分：

async getFictions(name: string) {
  const response = await this.http.get(`/${name}`);
  // 提取响应对象中的数组字段，此处假设字段名为data，根据API实际返回调整
  return response.data.data;
}

问题2：转换数组后访问属性返回undefined #

原因 #

你的IBook接口定义的字段名与API实际返回的字段名不匹配。例如API可能使用下划线命名（如fiction_id），而你用小驼峰命名（fictionId），导致属性无法正确映射。

修复步骤 #

1. 先打印完整API响应，确认实际字段名：

const loadBooks = async () => {
  const api = await BookApi.getFictions(name);
  console.log("API原始数据:", api); // 在控制台查看实际返回的字段
  setFictions(api);
};

2. 根据实际字段调整接口，或做字段映射：

方式1：调整接口匹配实际字段

export default interface IBook {
  fiction_id: string; // 改为API实际返回的字段名
  title: string;
  author: string;
  descs: string;
  cover: string;
}

方式2：在API请求中做字段映射

async getFictions(name: string) {
  const response = await this.http.get(`/${name}`);
  // 将API返回的字段映射为接口定义的小驼峰格式
  return response.data.data.map(item => ({
    fictionId: item.fiction_id,
    title: item.title,
    author: item.author,
    descs: item.descs,
    cover: item.cover
  }));
}

额外优化建议 #

• 增加异步请求错误处理，避免请求失败导致状态异常：

const loadBooks = async () => {
  try {
    const api = await BookApi.getFictions(name);
    setFictions(api);
  } catch (error) {
    console.error("加载书籍数据失败:", error);
  }
};

内容的提问来源于stack exchange，提问作者Luis Miguel hung Ww