如何将JSON API返回的对象转为数组以使用.map()方法？

问题根源分析 #

你调用的Jikan API返回结构是外层对象包裹内部数组，即{ data: [动漫列表数组], ...其他字段 }，但你当前把整个API返回对象赋值给了state.posts，导致posts是对象而非数组，自然无法调用.map()。

直接修正你的代码 #

1. 修改ApiSlice中的数据赋值逻辑 #

在getPosts.fulfilled回调里，直接提取API返回的data数组赋值给state.posts：

// ApiSlice
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export const getPosts = createAsyncThunk("posts/getPosts", async () => {
  return fetch("https://api.jikan.moe/v4/anime?q=naruto&sfw").then((response) =>
    response.json()
  );
});
const postSlice = createSlice({
  name: "posts",
  initialState: {
    posts: [],
    loading: false,
  },
  extraReducers: {
    [getPosts.pending]: (state, action) => {
      state.loading = true;
    },
    [getPosts.fulfilled]: (state, action) => {
      state.loading = false;
      // 关键：提取API返回的data数组
      state.posts = action.payload.data;
    },
    [getPosts.rejected]: (state, action) => {
      state.loading = false;
    },
  },
});

export default postSlice.reducer

2. 修正Apidata组件的渲染逻辑 #

现在posts已经是数组了，直接遍历并渲染动漫标题（注意添加唯一key属性，避免React警告）：

// Api data组件
import React from "react";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getPosts } from "../store/anime";

function Apidata() {
  const { posts, loading } = useSelector((state) => state.post);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPosts());
  }, []);

  return (
    <div>
      {/* 处理加载状态 */}
      {loading ? (
        <p>加载中...</p>
      ) : (
        posts.map((item) => (
          {/* 使用mal_id作为唯一key */}
          <h2 key={item.mal_id}>{item.title}</h2>
        ))
      )}
    </div>
  );
}

export default Apidata;

通用对象转数组方法（针对你示例中的场景） #

如果遇到类似{0: somedata}这种键值对对象需要转数组的情况，可使用以下方法：

方法1：提取对象的值转为数组 #

const codeReturnedFromJSONRequest = {data:{0: 'somedata'}};
// 得到 ['somedata']
const requiredData = Object.values(codeReturnedFromJSONRequest.data);

方法2：保留键值对转为数组对象 #

如果需要保留原对象的键信息，可以用Object.entries()：

const codeReturnedFromJSONRequest = {data:{0: 'somedata'}};
// 得到 [{key: '0', data: 'somedata'}]
const requiredData = Object.entries(codeReturnedFromJSONRequest.data).map(([key, value]) => ({
  key,
  data: value
}));

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