MUI X Data Grid v6中如何动态修改columnVisibilityModel？

问题出在你把columnVisibilityModel放在了initialState里——initialState仅在组件初始化时生效，后续修改它无法同步到DataGrid的当前状态，网格会维护自己的内部状态，不会再读取initialState的变化。

修复步骤： #

1. 直接传递columnVisibilityModel作为组件属性，而不是嵌套在initialState中：

<StyledDataGrid
  rows={chartData}
  columns={columns}
  getRowId={(row) => row.id + Math.floor(Math.random() * 100)}
  columnVisibilityModel={columnVisibilityModel} // 单独传入这个属性
  initialState={{ 
      pagination: {paginationModel: {pageSize: 100}}
   }}
/>

2. 优化状态更新逻辑（可选但更健壮），使用函数式更新避免闭包导致的旧值问题：

useEffect(() => {
  setColumnVisibilityModel(prev => ({
    ...prev,
    stage: viewMode !== "question"
  }));
}, [viewMode]);

这样修改后，当viewMode切换时，columnVisibilityModel的变化会直接同步到DataGrid，stage列就能正常显示/隐藏了。

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