MantineReactTable数据无法显示求助：数据可下载但表格行空白

可能的原因及解决方案 #

1. 数据结构不匹配或缺失空值检查 #

代码中直接通过fetchedData[0]生成列配置，但如果fetchedData为空数组，会触发报错导致列和数据无法正常设置。另外需要确认getDataFromFastmagSql返回的每个数据对象的键名，和生成列的accessor完全一致（包括大小写、特殊字符）。

修改prepareColumns函数，添加空数据处理并打印数据确认结构：

function prepareColumns() {
  getDataFromFastmagSql("SELECT * FROM produits LIMIT 15")
    .then((fetchedData) => {
      // 打印数据确认结构
      console.log("获取到的数据:", fetchedData);
      if (!fetchedData || fetchedData.length === 0) {
        console.error("未获取到有效数据");
        return;
      }
      const fetchedColumns = Object.keys(fetchedData[0]).map((key) => ({
        header: key,
        accessor: key,
        id: key,
      }));
      console.log("生成的列配置:", fetchedColumns);
      setColumns(fetchedColumns);
      setData(fetchedData);
    })
    .catch((error) => {
      console.error("数据获取失败:", error);
    });
}

2. 移除多余的useMemo避免更新延迟 #

当前用useMemo包裹columnSet生成columns，但这个处理没有实际优化作用，反而可能导致表格无法及时获取最新的列配置。直接使用columnSet作为表格的columns属性即可：

// 移除多余的useMemo代码
// const columns = useMemo<MRT_ColumnDef[]>(() => columnSet, [columnSet]);

// 表格组件直接传入columnSet
<MantineReactTable
  columns={columnSet}
  data={dataSet}
  enableRowSelection
  enableColumnOrdering
  enableGlobalFilter={false}
/>

3. 检查版本兼容性 #

确保mantine-react-table和@mantine/core的版本兼容，版本不匹配可能引发渲染异常，可参考官方文档确认依赖对应关系。

4. 处理特殊键名 #

如果数据中的键名包含空格、特殊符号等，需要确保列的accessor完全对应，或者对键名做统一处理后再生成列配置。

修改后的完整代码示例 #

import { useState } from "react";
import getDataFromFastmagSql from "../Services/getDataFromFastmagSql";
import { Container, Grid, Button } from "@mantine/core";
import { MRT_ColumnDef, MantineReactTable } from "mantine-react-table";

function TableResult() {
  
  const [dataSet, setData] = useState([]);
  const [columnSet, setColumns] = useState<MRT_ColumnDef[]>([]);

  function prepareColumns() {
    getDataFromFastmagSql("SELECT * FROM produits LIMIT 15")
      .then((fetchedData) => {
        console.log("获取到的数据:", fetchedData);
        if (!fetchedData?.length) {
          console.error("无有效数据返回");
          return;
        }
        const fetchedColumns = Object.keys(fetchedData[0]).map((key) => ({
          header: key,
          accessor: key,
          id: key,
        }));
        console.log("列配置:", fetchedColumns);
        setColumns(fetchedColumns);
        setData(fetchedData);
      })
      .catch((error) => {
        console.error("数据请求错误:", error);
      });
  }

  return (
    <Container fluid>
      <Grid>
        <Grid.Col span={12}>
          <Button variant="light" onClick={prepareColumns}>Run this ma caille</Button>
          <MantineReactTable
            columns={columnSet}
            data={dataSet}
            enableRowSelection
            enableColumnOrdering
            enableGlobalFilter={false}
          />
        </Grid.Col>
      </Grid>
    </Container>
  );
}
export default TableResult;

修改完成后，打开浏览器控制台查看打印的日志，确认数据结构和列配置是否匹配，即可定位并解决问题。

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