Material React Table API取数时null属性读取错误的解决方案咨询

数据老陈

2026-8-18

问题解决方案

报错原因：你的数据中部分行的stockCardType、stockType或unit字段为null，当Material React Table通过accessorKey访问嵌套的.name属性时，会触发空值读取错误。针对你的两个问题，解决方案如下：

1. 错误解决方法

提供两种直接可行的修复方式，按需选择：

方法一：列定义中使用`accessorFn`替代`accessorKey`（推荐）

无需修改原始数据，直接在列配置中做空值检查并设置默认值，灵活性更高：

const columns = useMemo(
  () => [
    // ...其他列保持不变
    {
      accessorFn: (row) => row.stockType?.name ?? "无数据",
      header: "Stok Tipi",
    },
    {
      accessorFn: (row) => row.stockCardType?.name ?? "无数据", // 修复报错字段
      header: "Stok Kart Tipi",
    },
    {
      accessorFn: (row) => row.unit?.name ?? "无数据",
      header: "Birim",
    },
    // ...其他列保持不变
  ],
  []
);

原理：row.stockCardType?.name通过可选链运算符?.跳过空值读取，?? "无数据"用空值合并运算符设置默认显示文本。

方法二：预处理API返回数据

如果希望继续使用accessorKey，可以在设置rows前统一修复空值嵌套字段：

const getStockCardList = async () => {
  setShowLoader(true);
  search.filter.accountId = decoded.accountId;
  search.filter.supplierId = decoded.supplierId;
  var response = await getStockCardSearch(search);
  // 预处理：将null的嵌套字段替换为空对象
  const processedRows = response?.data?.data?.map(row => ({
    ...row,
    stockType: row.stockType ?? {},
    stockCardType: row.stockCardType ?? {},
    unit: row.unit ?? {},
  })) || [];
  setRows(processedRows);
  setShowLoader(false);
};

原理：把null的嵌套对象替换为空对象{}，此时accessorKey: "stockCardType.name"会读取到undefined，表格会显示空值而非报错。