React Material Table获取数据后无法加载问题求助

核心问题 #

你代码里的关键问题在于异步操作的时机控制：

1. 当你在map中使用async/await时，map会返回一组Promise对象，而你直接把这些未完成的Promise推到apiData里，然后立刻调用setTableData——这时候所有支付状态的异步请求还没结束，表格拿到的是不完整的、包含Promise的无效数据，所以显示“无记录可显示”。
2. 控制台能看到数据是因为浏览器的console会动态更新引用类型的显示，实际你打印时数据还没真正填充完成。

修复后的代码 #

import { useEffect, useState } from 'react';
import axios from 'axios';
import dateFormat from '你的dateFormat库路径';
import MaterialReactTable from '@material-table/core';

// 假设你已经声明了状态
const [tableData, setTableData] = useState([]);
const [contractorData, setContractorData] = useState([]);

useEffect(() => {
  // 处理订单数据 + 支付状态
  axios.get('api/OrderData/getAllOrders')
    .then(async res => {
      // 为每个订单创建一个获取支付状态的Promise
      const orderTasks = res.data.map(async x => {
        let paymentStatus = "Nie opłacone";
        try {
          const paymentRes = await axios.get(`/api/Payments/getPaymentByOrderGUID?OrderGuid=${x.orderGUID}`);
          if (paymentRes.status === 200) {
            paymentStatus = "Opłacone";
          }
        } catch (err) {
          console.error('支付状态请求失败:', err);
        }
        // 返回完整的订单对象
        return {
          orderId: x.orderId,
          orderGUID: x.orderGUID,
          orderName: x.orderName,
          orderDate: dateFormat(x.orderDate, "ddd mmm dd yyyy HH:MM:ss"),
          orderStatus: x.orderStatus,
          contractorId: x.contractorId,
          creatorUsername: x.creatorUsername,
          orderVendor: x.orderVendor,
          magazyn: x.magazyn,
          productId: x.productId,
          orderPayment: paymentStatus
        };
      });

      // 等待所有订单的支付状态请求完成
      const finalOrders = await Promise.all(orderTasks);
      // 统一设置表格数据
      setTableData(finalOrders);
    })
    .catch(err => {
      console.error('订单数据请求失败:', err);
    });

  // 处理承包商数据（同样改用不可变方式）
  axios.get('api/Contractor/getAllContractors')
    .then(res => {
      const contractors = res.data.map(x => ({
        contractorId: x.contractorId,
        contractorName: x.contractorName,
        contractorSurname: x.contractorSurname,
        contractorIndividualDiscount: x.contractorIndividualDiscount
      }));
      setContractorData(contractors);
    })
    .catch(err => {
      console.error('承包商数据请求失败:', err);
    });
}, []);

// Material Table配置保持不变
<MaterialReactTable
  displayColumnDefOptions={{
    'mrt-row-actions': {
      muiTableHeadCellProps: {
        align: 'center',
      },
      size: 120,
    },
  }}
  columns={columns}
  data={tableData}
  editingMode="modal"
  enableColumnOrdering
  enableRowActions
  onEditingRowSave={handleSaveRowEdits}
  onEditingRowCancel={handleCancelRowEdits}
  renderRowActionMenuItems={({ row, closeMenu, table}) => [
    // 你的操作菜单内容
  ]}
/>

关键优化点 #

1. 用Promise.all等待所有异步请求完成：确保所有订单的支付状态都获取到后，再一次性更新表格状态，避免数据不完整。
2. 避免直接修改数组：不再用push修改原数组，而是通过map生成新数组，符合React状态更新的不可变性原则。
3. 简化异步逻辑：把支付状态的判断逻辑抽离，代码更易读，同时统一错误处理。

额外建议 #

如果订单数量较多，批量调用支付状态接口会产生大量请求，建议后端提供批量查询支付状态的接口，减少前端请求次数，提升性能。

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