MUIX数据网格 - 获取新数据时强迫过滤器和排序状态要重置

Question

I最近开始使用MUI X数据网格。我将其放在一个页面上，其中一个下拉列表在选择选项时会获取不同的数据，并将新数据传递给行支架。我只是注意到，如果设置过滤器/排序，然后更改为下拉菜单中的另一个项目，则仍然应用过滤器和排序。换句话说，如果我正在查看100个项目的列表，并设置一个将其简化为10个项目的过滤器，然后更改下拉列表中的项目以获取新数据，则不会显示新数据（除非恰好与过滤器匹配）。

如何按需删除过滤器？在单击默认过滤器窗口（x图标）中的删除图标时，基本上运行任何逻辑运行。

或者还有另一种解决方法吗？我看不到任何可以控制此的道具或配置。我正在使用非Pro版本。Version5.1.1

function GridExample() {
  const [data, setData] = useState([]); // for grid
  const [selectedData, setSelectedData] = useState(""); //id in dropdown

  useEffect(() => {
    async function getData() {
       const payload = await getGridData(selectedData);
       setData(payload.data); //replace w/new data
    }

    if (selectedData !== "") {
       getData();
    }
  }, [selectedData]);

  function handleDataSelectionChange(e){
     setSelectedData(e.target.value);
  }

  const gridColumns: GridColumns = [
     {
       field: "Id",
       headerName: "Id",
       width: 300,
       hide: true,
       hideable: false,
       filterable: false,
     },
     { field: "name", headerName: "Name", width: 300 },
     { field: "description", headerName: "Desc", width: 500 },
     {
       field: "enabled",
       headerName: "Enabled",
       width: 150,
       valueGetter: (params: GridValueGetterParams) => {
          return params.row.enabled ? "Yes" : "No";
        },
       },
     ];

     if (data) {
       return (
           <div style={{ height: 650, width: "100%" }}>
              <div style={{ display: "flex", height: "100%" }}>
                 <div style={{ flexGrow: 1 }}>
                    <DataGrid 
                      columns={gridColumns} 
                      rows={data} 
                     />
                 </div>
               </div>
            </div>
         )
      }
  }

这些2个道具在datagrid上接受了

Answer 1

重置按钮未暴露。如果您在功能中使用重新加载选择新数据时刷新页面怎么样？setSortModel([{ field: 'active', sort: 'asc' }])