React Material Table动态列不显示问题排查

核心问题 #

你的useMemo依赖项数组为空，导致columns仅在组件首次渲染时计算一次。初始状态下activatedFields是空数组，过滤后没有列；后续API返回数据更新activatedFields状态时，useMemo不会重新执行过滤逻辑，columns始终保持为空，因此表格没有列显示。

修复步骤 #

1. 添加useMemo依赖项
   将activatedFields加入useMemo的依赖数组，确保状态更新时重新计算过滤后的列：

   const columns = useMemo(
     () =>
       allColumns.filter(function (el) {
         return activatedFields.includes(el.accessorKey);
       }),
     [activatedFields] // 新增依赖项
   );
   

2. 优化列定义（可选）
   如果allColumns是固定不变的配置，建议将它移到组件外部作为常量，避免每次组件渲染都重新创建数组：

   // 组件外部定义固定列配置
   const allColumns = [
     {
       accessorKey: "_id",
       header: "_id",
     },
     {
       accessorKey: "werk_standort",
       header: "werk_standort",
     },
     {
       accessorKey: "fachbereich",
       header: "fachbereich",
     },
     // 其他列配置
   ];
   
   export default function ServiceList() {
     // 组件内部逻辑
   }
   

3. 同步异步数据加载（可选）
   如果services数据也是异步获取的，建议并行加载激活列和服务数据，避免数据未就绪导致的异常：

   const [services, setServices] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   
   async function fetchData() {
     try {
       // 并行请求两个接口
       const [activatedRes, servicesRes] = await Promise.all([
         axios.get(`${process.env.REACT_APP_BACKEND}/settings/editServices`),
         axios.get(`${process.env.REACT_APP_BACKEND}/services`), // 替换为你的服务数据接口
       ]);
       setActivatedFields(activatedRes.data["0"].value.activatedFields);
       setServices(servicesRes.data);
     } catch (err) {
       console.error("数据加载失败", err);
     } finally {
       setIsLoading(false);
     }
   }
   
   useEffect(() => {
     fetchData();
   }, []);
   
   // 加载状态下显示占位
   if (isLoading) return <div>加载中...</div>;
   
   return (
     <>
       <MaterialReactTable table={table} />
     </>
   );
   

内容的提问来源于stack exchange，提问作者Thomas Olef