JavaScript对象转数组方法及API数据获取显示问题排查

JavaScript提供了多种内置方法，可根据不同需求将对象转换为数组：

• 提取对象的属性名（键）为数组：使用Object.keys()

  const user = { name: 'Alice', age: 25, role: 'Developer' };
  const keysArray = Object.keys(user);
  // 输出：['name', 'age', 'role']
  

• 提取对象的属性值为数组：使用Object.values()

  const user = { name: 'Alice', age: 25, role: 'Developer' };
  const valuesArray = Object.values(user);
  // 输出：['Alice', 25, 'Developer']
  

• 提取键值对为嵌套数组：使用Object.entries()，每个元素是[键, 值]形式的数组

  const user = { name: 'Alice', age: 25, role: 'Developer' };
  const entriesArray = Object.entries(user);
  // 输出：[['name', 'Alice'], ['age', 25], ['role', 'Developer']]
  

• 转换自定义结构的对象为数组：如果对象是{ id1: data1, id2: data2 }这种键为唯一标识的结构（比如你的书店API返回格式），可通过遍历键值对构建目标数组：

  const apiResponse = {
    'book_001': { title: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas' },
    'book_002': { title: 'React设计模式', author: 'Michele Bertoli' }
  };
  const booksArray = Object.entries(apiResponse).map(([itemId, bookInfo]) => ({
    item_id: itemId,
    ...bookInfo
  }));
  // 输出：[{ item_id: 'book_001', title: 'JavaScript高级程序设计', ... }, ...]
  

你的代码中getBookDataThunk存在核心逻辑错误，同时getBooks的数组转换逻辑也不符合API返回格式，以下是具体修复方案：

1. getBookDataThunk 的错误修复 #

原代码存在两个问题：

• 混合使用await和.then()，且.then()未返回值，导致res为undefined
• Axios会自动解析JSON响应，无需调用res.json()（这是原生fetch的用法，Axios直接通过response.data获取解析后的数据）

修复后的代码：

export const getBookDataThunk = createAsyncThunk(
  'books/getBookData',
  async () => {
    const response = await axios.get(`https://us-central1-bookstore-api-e63c8.cloudfunctions.net/bookstoreApi/apps/${currentApiKey}/books`);
    console.log(response.data);
    // 直接返回解析后的响应数据
    return response.data;
  },
);

2. getBooks 与 createBookList 的逻辑修复 #

书店API返回的是以item_id为键的对象，而非数组，原createBookList用forEach遍历对象会报错。需要先将对象转换为数组：

// 重构数组转换逻辑，适配API返回格式
const createBookList = (bookObj) => {
  return Object.entries(bookObj).map(([item_id, bookData]) => ({
    item_id,
    ...bookData
  }));
};

export const getBooks = createAsyncThunk(
  'books/getBooks',
  async () => {
    // 去掉冗余的.then()，直接用await获取响应
    const response = await axios.get(`https://us-central1-bookstore-api-e63c8.cloudfunctions.net/bookstoreApi/apps/${currentApiKey}/books`);
    return createBookList(response.data);
  },
);

3. uploadBookThunk 的细节优化 #

同样，Axios无需调用res.json()，直接返回res.data即可：

export const uploadBookThunk = createAsyncThunk(
  'uploadBook',
  async (book) => {
    const res = await axios.post(`https://us-central1-bookstore-api-e63c8.cloudfunctions.net/bookstoreApi/apps/${currentApiKey}/books`, {
      item_id: book.item_id,
      title: book.title,
      author: book.author,
      category: book.category,
    });
    return res.data;
  },
);

内容的提问来源于stack exchange，提问作者David Jose Verde Alvarez