React MUI DataGrid fetch事件后动态显隐列不生效问题咨询

你当前的写法属于直接原地修改columns变量的属性，没有通过React的状态更新机制触发重渲染，MUI的表格/数据网格组件检测不到列配置的变更，因此显隐配置不会生效。

• 首先将columns声明为React的响应式状态，而非普通常量/外部变量
• 修改列配置时必须生成全新的数组和列对象，不能直接修改原有引用，再调用状态setter更新
• 确保MUI数据组件的columns属性绑定的是该响应式状态

import { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
// 其他依赖引入

// 抽离初始列配置
const initialColumns = [
  { field: 'id', headerName: 'ID', width: 90 },
  // 这里的hide默认值按你的业务需求设置，示例中第2列默认隐藏
  { field: 'targetCol', headerName: '目标列', width: 150, hide: true },
  // 剩余其他列配置
];

export default function YourComponent() {
  // 把columns设为响应式状态
  const [columns, setColumns] = useState(initialColumns);
  const [data, setData] = useState([]);

  const getData = () => {
    fetch(url + '/rha/apicall/getData/', {
      headers: { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
    .then(response => {
      enqueueSnackbar('Data Loaded', {variant: 'info'});
      return response.json();
    })
    .then(myJson => {
      // 生成全新的columns数组，仅修改指定列的配置
      const updatedColumns = columns.map((col, index) => {
        // 匹配你要修改的第2列（索引为1）
        if (index === 1) {
          return { ...col, hide: false };
        }
        return col;
      });
      // 更新列状态，触发重渲染
      setColumns(updatedColumns);
      setData(myJson.adh);
    });
  }

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={data}
        columns={columns}
        // 其他组件配置
      />
    </div>
  );
}

MUI DataGrid原生提供了columnVisibilityModel属性用来控制列显隐，不需要修改columns数组，使用更便捷：

import { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';

// 列配置不需要写hide属性
const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'targetCol', headerName: '目标列', width: 150 },
  // 其他列配置
];

export default function YourComponent() {
  // 用可见性模型控制列显隐，key为列的field值，false为隐藏，true为显示
  const [columnVisibilityModel, setColumnVisibilityModel] = useState({
    targetCol: false // 初始隐藏目标列
  });
  const [data, setData] = useState([]);

  const getData = () => {
    fetch(/* 你的请求配置 */)
    .then(res => res.json())
    .then(myJson => {
      // 直接更新可见性模型，显示目标列
      setColumnVisibilityModel(prev => ({
        ...prev,
        targetCol: true
      }));
      setData(myJson.adh);
    });
  }

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={data}
        columns={columns}
        columnVisibilityModel={columnVisibilityModel}
        onColumnVisibilityModelChange={newModel => setColumnVisibilityModel(newModel)}
        // 其他配置
      />
    </div>
  );
}

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