React无法渲染API返回数据？React TypeScript+Chakra UI问题求助

核心问题：未使用React状态管理数据 #

你直接声明了普通数组userOrders: Orders[] = []，React不会追踪普通变量的变化。当你在useEffect里用userOrders.push()添加数据时，数组确实更新了，但组件不会重新渲染，页面始终基于初始的空数组渲染，所以map循环没有内容输出。

修复步骤 #

1. 改用useState管理订单数据 #

将普通数组替换为React状态，这样数据更新时会触发组件重新渲染：

import React, { useEffect, useState } from "react";
import { Box, Text } from "@chakra-ui/react";
import { useParams } from "react-router-dom";
import Header from "./BuyerHeader";
import instance from "../api/api";
import Orders from "../models/Orders.type";

function EditOrder() {
  const { id } = useParams();
  // 用useState初始化订单状态
  const [userOrders, setUserOrders] = useState<Orders[]>([]);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    async function getOrderById() {
      try {
        // 将signal传入请求，支持组件卸载时取消请求
        const response = await instance.get(`/api/v1/orders/${id}`, { signal });
        // 用状态更新函数替换push操作
        setUserOrders(response.data.orders);
      } catch (error) {
        // 过滤取消请求的错误，避免无效日志
        if (error instanceof Error && error.name !== 'CanceledError') {
          console.error('获取订单失败:', error);
        }
      }
    }

    // 确保id存在时再发起请求
    if (id) getOrderById();

    return () => controller.abort();
  }, [id]); // 依赖数组加入id，路由参数变化时重新请求

  return (
    <Box>
      <Header />
      <Box>Edit Order Page</Box>
      <Box bgColor="pink" w={100} h={100}>
        <Text color="black" fontSize={20} fontWeight="bold">
          Orders:
        </Text>
        {userOrders.map((orders, index) => (
          // 增加key属性，符合React列表渲染要求
          <Text key={index} bgColor="black" fontSize={30} fontWeight="bold">
            Item Name: {orders.productName}
          </Text>
        ))}
      </Box>
    </Box>
  );
}

export default EditOrder;

2. 补充说明 #

• 依赖数组添加id：原代码依赖数组为空，当路由参数id变化时不会重新发起请求，加入id后能保证参数变化时获取对应订单。
• 列表渲染加key：React要求列表项必须有唯一key，避免渲染警告和性能问题。
• 异常处理：捕获请求错误并区分取消请求的场景，避免不必要的错误日志。
• 数据格式校验：确认response.data.orders是数组类型，如果API返回单个订单对象，需改为setUserOrders([response.data.orders])，保证userOrders为数组才能正常执行map循环。

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