如何在页面刷新时保存mui-datatables的筛选芯片状态？

要保留刷新后的筛选状态，核心思路是把筛选数据存在localStorage里，页面初始化时再读出来恢复筛选。具体实现步骤如下：

• 第一步：在组件里维护筛选状态的状态变量，组件挂载时从localStorage读取历史筛选数据
• 第二步：给MUI-Datatables配置onFilterChange回调，每次筛选变化时自动把最新筛选状态存到localStorage
• 第三步：把读取到的历史筛选数据通过表格的options传入，初始化时恢复筛选

下面是修改后的完整代码示例：

import { useState, useEffect } from 'react';
import MyMUIDataTable from './MyMUIDataTable'; // 假设你的自定义组件路径

const YourComponent = () => {
  const th = ['col1', 'col2', 'col3'];
  const [data, setData] = useState([]); // 假设你的数据状态
  // 初始化筛选状态，优先从localStorage读取
  const [filters, setFilters] = useState(() => {
    const savedFilters = localStorage.getItem('muiDatatableFilters');
    return savedFilters ? JSON.parse(savedFilters) : {};
  });

  // 监听筛选变化，保存到localStorage
  const handleFilterChange = (newFilters) => {
    setFilters(newFilters);
    localStorage.setItem('muiDatatableFilters', JSON.stringify(newFilters));
  };

  // 组件挂载时如果有保存的筛选，可按需重新请求/处理数据
  useEffect(() => {
    // 这里可以根据filters更新数据，比如发起带筛选参数的请求
  }, [filters]);

  const options = {
    // 保留你的原有配置
    filters: filters, // 传入保存的筛选状态
    onFilterChange: handleFilterChange, // 绑定筛选变化回调
  };

  return (
    <MyMUIDataTable
      style={{ width: 'max-content' }}
      data={data}
      columns={th}
      options={options}
    />
  );
};

export default YourComponent;

注意事项 #

• localStorage仅支持字符串存储，所以要用JSON.stringify和JSON.parse处理筛选对象
• 若页面存在多个MUI表格实例，建议给localStorage的key添加唯一标识（比如表格ID），避免状态冲突
• 如果筛选数据包含敏感信息，建议改用sessionStorage或后端存储方案

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