Material UI DataGrid点击搜索后无限增高及分页尺寸闪烁问题求助

1. 修复异步请求的状态更新逻辑 #

你当前onSearchHandle里的setShowLoader(false)没放在Promise回调里，会导致加载指示器刚显示就立刻隐藏——异步请求还没完成，useEffect就触发显示了Grid，等数据返回更新adUsers时，Grid又会重新渲染，这是引发闪烁和高度异常的核心原因。修改代码：

const onSearchHandle = (e: any) => {
    if (validate()) {
        setShowLoader(true);
        userStore.getAdUsers(searchText)
            .then((data) => {
                setADUsers(data);
            })
            .finally(() => {
                setShowLoader(false); // 请求完成（成功/失败）后再隐藏加载指示器
            });
    } else {
        console.log("Validation failed");
    }
};

2. 简化状态逻辑，避免Grid反复挂载卸载 #

现在用showGrid控制Grid显示，依赖showLoader的状态变化，多状态联动容易出问题。直接通过showLoader和adUsers的状态控制显示，删掉showGrid相关的状态和useEffect：

// 渲染部分改成：
<div className="col table-responsive p-2">
    {!showLoader && adUsers.length > 0 && (
        <DataGrid
            getRowId={(row: IADUser) => row.rowId as number}
            rows={adUsers}
            columns={columns}
            initialState={{
                pagination: {
                    paginationModel: {
                        pageSize: 10,
                    },
                },
            }}
            pageSizeOptions={[10]}
            disableRowSelectionOnClick
        />
    )}
    {showLoader && <Spinner />}
</div>

这样Grid只会在数据加载完成且有数据时显示，避免反复挂载卸载导致的异常。

3. 给DataGrid设置固定高度 #

Material UI的DataGrid如果不设置高度，会随内容自动调整，数据变化时容易出现无限增高的问题。给Grid加固定高度：

<DataGrid
    // 其他属性保留
    style={{ height: '600px' }}
/>

或者用CSS类控制：

.datagrid-fixed {
    height: 600px;
    overflow-y: auto;
}

然后给Grid加上className="datagrid-fixed"。

4. 检查rowId的唯一性 #

确保row.rowId是唯一值，如果有重复的rowId，DataGrid会出现渲染异常（包括高度、分页闪烁）。打印adUsers数组，检查每个row的rowId是否唯一，或者改用用户ID等其他唯一标识作为getRowId的返回值。

5. 检查列配置的稳定性 #

如果columns里的列没有设置宽度（width或flex属性），Grid布局会不稳定，引发高度变化。给每个列明确设置宽度：

const columns = [
    { field: 'rowId', headerName: 'ID', width: 100 },
    { field: 'username', headerName: '用户名', flex: 1 },
    // 其他列同理
];

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