React 异步数据渲染异常：从踩坑到解决方案的开发日志

const fetchOrders = async () => {
  try {
    const response = await axios.get('/api/orders', {
      headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
    });
    console.log('请求成功，返回数据：', response.data); // 新增打印
    setOrders(response.data);
    setLoading(false);
  } catch (error) {
    console.error('请求失败：', error);
    setError('获取订单失败，请重试');
    setLoading(false);
  }
};

// 状态定义
const [orders, setOrders] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');

// 渲染逻辑
return (
  <div className="order-list">
    {loading ? (
      <Spin size="large" />
    ) : error ? (
      <Alert message="错误" description={error} type="error" />
    ) : (
      <Table 
        columns={columns} 
        dataSource={orders} 
        rowKey="orderId" 
      />
    )}
  </div>
);

// 初始错误代码
useEffect(() => {
  fetchOrders(); // 调用异步请求函数
}, []); // 空依赖数组

// fetchOrders函数定义（在组件内部）
const fetchOrders = async () => {
  // 数据请求逻辑...
};

import { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
import { Table, Spin, Alert } from 'antd';
import 'antd/dist/reset.css';

// 订单列表列配置
const columns = [
  {
    title: '订单编号',
    dataIndex: 'orderId',
    key: 'orderId',
    width: 120,
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
    key: 'productName',
  },
  {
    title: '订单金额',
    dataIndex: 'amount',
    key: 'amount',
    render: (amount) => `¥${amount.toFixed(2)}`,
  },
  {
    title: '订单状态',
    dataIndex: 'status',
    key: 'status',
    render: (status) => {
      const statusMap = {
        'PENDING': '待支付',
        'PAID': '已支付',
        'SHIPPED': '已发货',
        'COMPLETED': '已完成'
      };
      return statusMap[status] || status;
    },
  },
];

const OrderList = () => {
  const [orders, setOrders] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  // 获取当前用户token（作为依赖项，token变化时重新请求）
  const token = localStorage.getItem('token');

  // 1. 用useCallback固定函数引用，避免每次渲染重新创建
  const fetchOrders = useCallback(async () => {
    setLoading(true);
    try {
      const response = await axios.get('/api/orders', {
        headers: { Authorization: `Bearer ${token}` }
      });
      // 修复：确保返回数据是数组格式（兼容后端可能返回的空对象）
      const orderData = Array.isArray(response.data) ? response.data : [];
      setOrders(orderData);
      setError('');
    } catch (error) {
      console.error('订单请求异常：', error);
      setOrders([]);
      setError(error.response?.data?.message || '获取订单失败，请稍后重试');
    } finally {
      setLoading(false); // 无论成功失败，都停止加载状态
    }
  }, [token]); // 依赖token，token变化时更新函数

  // 2. 在useEffect依赖数组中添加fetchOrders和token
  useEffect(() => {
    // 防御性判断：无token时不发起请求（避免无效请求）
    if (token) {
      fetchOrders();
    } else {
      setLoading(false);
      setError('请先登录');
    }
  }, [fetchOrders, token]); // 依赖固定引用的fetchOrders和token

  return (
    <div className="order-list" style={{ padding: '20px' }}>
      <h2 style={{ marginBottom: '20px' }}>我的订单列表</h2>
      {loading ? (
        <div style={{ textAlign: 'center', padding: '50px' }}>
          <Spin size="large" tip="正在加载订单数据..." />
        </div>
      ) : error ? (
        <Alert message="操作提示" description={error} type="error" showIcon style={{ marginBottom: '20px' }} />
      ) : orders.length === 0 ? (
        <Alert message="暂无数据" description="您暂无历史订单，快去下单吧！" type="info" showIcon />
      ) : (
        <Table 
          columns={columns} 
          dataSource={orders} 
          rowKey="orderId" 
          pagination={{ pageSize: 10 }} 
          bordered 
        />
      )}
    </div>
  );
};

export default OrderList;