为何使用useState初始化MUI DataGrid的filterModel后筛选功能失效？

使用useState钩子初始化filterModel时，MUI DataGrid的筛选功能无法正常工作。注释第1行并启用第2行时筛选失效，反之则正常。

正常工作的代码 #

const filterModel = {items: [{columnField: 'descript', operatorValue: 'contains', value: descFilterModel}]};

//const [filterModel, setFilterModel] = useState({items: [{columnField: 'descript', operatorValue: 'contains', value: descFilterModel}]});
     
return (
  <DataGridPremium getRowId={(row) => row.qjobdefid}
    columns={columns}          
    filterModel={filterModel}          
    rows={rows}
    checkboxSelection={columns.length !== 0}
    disableSelectionOnClick
    loading={loading}
    rowHeight={48}
    scrollbarSize={10}
  />
)

筛选失效的代码 #

//const filterModel = {items: [{columnField: 'descript', operatorValue: 'contains', value: descFilterModel}]};

const [filterModel, setFilterModel] = useState({items: [{columnField: 'descript', operatorValue: 'contains', value: descFilterModel}]});
     
return (
  <DataGridPremium getRowId={(row) => row.qjobdefid}
    columns={columns}          
    filterModel={filterModel}          
    rows={rows}
    checkboxSelection={columns.length !== 0}
    disableSelectionOnClick
    loading={loading}
    rowHeight={48}
    scrollbarSize={10}
  />
)

效果对比 #

• 正常效果：
• 失效效果：

问题原因 #

useState的初始值仅在组件首次渲染时被设置一次，后续即使descFilterModel发生变化，filterModel的state也不会自动更新。而直接声明变量的方式，每次组件渲染都会重新计算filterModel的值，能同步descFilterModel的最新变化，因此筛选功能正常。

解决方案 #

通过useEffect监听descFilterModel的变化，手动更新filterModel的state，确保DataGrid始终拿到最新的筛选条件：

const [filterModel, setFilterModel] = useState({
  items: [{columnField: 'descript', operatorValue: 'contains', value: descFilterModel}]
});

// 监听descFilterModel变化，更新筛选模型
useEffect(() => {
  setFilterModel({
    items: [{columnField: 'descript', operatorValue: 'contains', value: descFilterModel}]
  });
}, [descFilterModel]); // 依赖项：当descFilterModel改变时触发

return (
  <DataGridPremium getRowId={(row) => row.qjobdefid}
    columns={columns}          
    filterModel={filterModel}          
    rows={rows}
    checkboxSelection={columns.length !== 0}
    disableSelectionOnClick
    loading={loading}
    rowHeight={48}
    scrollbarSize={10}
  />
)

这样每次descFilterModel更新时，filterModel的state会同步更新，DataGrid就能正确应用最新的筛选规则，恢复筛选功能。

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