使用真实API替代假数据构建Admin Dashboard时的异常问题

核心问题 #

原教程中的ordersData是同步的数组，可直接使用；但你当前代码里的ordersData实际是一个Promise对象，并非最终的数组数据——这是运行不符合预期的根本原因。同时代码还存在解析逻辑错误。

具体错误点 #

1. 异步结果误解：fetch是异步操作，返回的是Promise而非直接的响应数据。直接把fetch(...)赋值给ordersData，得到的是Promise对象，不是目标数组。
2. 重复解析错误：res.json()已经自动将响应体解析为JavaScript对象/数组，data就是解析后的结果，不存在data.body属性，JSON.parse(data.body)属于无效操作，会引发错误。

修复方案 #

方案1：导出异步函数（推荐） #

将数据获取逻辑封装成async函数，在需要使用数据的地方调用并等待结果：

// 导出获取数据的异步函数
export const getOrdersData = async () => {
  try {
    const res = await fetch('API_URL', { method: "GET" });
    // 确认API返回结构：如果是直接数组就返回data，嵌套在body里则返回data.body
    const data = await res.json();
    return data;
  } catch (err) {
    console.error('数据请求失败:', err);
    return []; // 出错时返回空数组，避免后续逻辑崩溃
  }
};

在组件中结合React Hooks使用：

import { useState, useEffect } from 'react';
import { getOrdersData } from './your-file-path';

function AdminDashboard() {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    const fetchOrders = async () => {
      const fetchedOrders = await getOrdersData();
      setOrders(fetchedOrders);
    };
    fetchOrders();
  }, []);

  // 后续直接使用orders数组渲染即可
  return (
    <div>{/* 订单数据渲染逻辑 */}</div>
  );
}

方案2：导出Promise（不推荐，可读性较差） #

如果坚持要导出Promise对象，需修正解析逻辑：

export const ordersData = fetch('API_URL', { method: "GET" })
  .then(res => res.json())
  .then(data => {
    // 根据API实际返回结构调整，例如API返回{ body: [...] }则返回data.body
    return data;
  })
  .catch(err => {
    console.error('请求失败:', err);
    return [];
  });

在组件中使用：

import { useState, useEffect } from 'react';
import { ordersData } from './your-file-path';

function AdminDashboard() {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    ordersData.then(fetchedOrders => {
      setOrders(fetchedOrders);
    });
  }, []);

  // 渲染逻辑
}

额外检查步骤 #

打开浏览器开发者工具的「Network」面板，查看API请求的响应内容：

• 确认响应是否为预期的数组格式
• 如果响应是嵌套结构（比如{ code: 200, data: [...] }），需要在代码中返回对应的嵌套字段（比如return data.data）

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