调用API设置MUI DataGrid Pro的columnVisibilityModel报错求助

常见问题原因及修复方案 #

1. API返回数据包含无效列键 #

硬编码的对象仅包含DataGrid已定义的列名，但API返回的JSON可能存在未在列定义中声明的键，触发DataGrid的类型校验错误。

修复代码：

// 假设你的列定义数组为columns
const validColumnFields = columns.map(col => col.field);
// 过滤出仅包含有效列的对象
const filteredVisibilityModel = Object.fromEntries(
  Object.entries(visibleColumns).filter(([key]) => validColumnFields.includes(key))
);

// 赋值给DataGrid
<DataGridPro
  columnVisibilityModel={filteredVisibilityModel}
  // 其他props...
/>

2. 异步数据未兜底处理 #

API请求是异步操作，初始渲染时visibleColumns可能为undefined或null，而DataGrid要求columnVisibilityModel必须是对象类型。

修复代码：

<DataGridPro
  columnVisibilityModel={visibleColumns || {}}
  // 其他props...
/>

3. API返回的布尔值为字符串类型 #

部分API会将布尔值以字符串形式返回（如"true"/"false"），这会导致DataGrid无法正确解析列可见性状态。

修复代码：

// 转换所有值为布尔类型
const normalizedVisibilityModel = Object.fromEntries(
  Object.entries(visibleColumns).map(([key, value]) => [key, Boolean(value)])
);

4. TypeScript类型断言缺失 #

使用TypeScript时，API返回的对象未被正确断言为GridColumnVisibilityModel类型，导致类型校验失败。

修复代码：

import { GridColumnVisibilityModel } from '@mui/x-data-grid-pro';

// 获取API数据时添加类型断言
const visibleColumns = await fetch('/api/visibility') as GridColumnVisibilityModel;

5. apiRef使用时机错误 #

若尝试通过apiRef设置列可见性，需确保在组件挂载后且数据就绪时调用，避免和props中的columnVisibilityModel冲突。

修复代码：

import { useGridApiRef } from '@mui/x-data-grid-pro';
import { useEffect } from 'react';

const apiRef = useGridApiRef();

useEffect(() => {
  if (visibleColumns) {
    apiRef.current.setColumnVisibilityModel(visibleColumns);
  }
}, [visibleColumns, apiRef]);

// 此时不要在DataGrid props中设置columnVisibilityModel
<DataGridPro apiRef={apiRef} />

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