当我们在DataGrid的上下文菜单中单击“Filter”时，我们得到了这个error。我们试图为DataGrid实现这个组件层次结构，如下所示：
MigrationJobTable.tsx:

    return (
        <div data-testid='migrationJobTable' style={{ height: '100%', width: '100%' }}>
            <ClientSideDataGrid
                rows={rows}
                columns={MigrationJobColumns({ setIsPageLoading, caseId, userId })}
                setRows={setRows}
                GetRowsFromResponseObject={GetRowsFromResponseObject}
                apiString={apiString}
                initialSortModel={[{ field: 'JobId', sort: 'desc' }]}
                getRowId={(x: MigrationJob) => x.JobId}
                isPageLoading={isPageLoading}
                disableVirtualization={disableVirtualization}
                // Tests for this component do not pass without this
                columnBuffer={9}
            />
        </div>
    );

ClientSideDataGrid.tsx

interface Props extends DataGridProProps {
    initialSortModel: GridSortModel | undefined;
    disableVirtualization?: boolean | undefined;
    setRows?: Function | undefined;
    GetRowsFromResponseObject?: Function | undefined;
    apiString?: string | undefined;
    enablePagination?: boolean;
    CustomNoRowsOverlay?: React.JSXElementConstructor<any> | undefined;
    isPageLoading?: boolean | undefined;
    pageSize?: number | undefined;
}

    return (
        <div className="data-grid-pro-class" data-testid="clientSideDataGrid" style={{ height: '100%', width: '100%' }}>
            <BaseDataGrid
                {...props}
                rowCount={props.rows.length}
                page={page}
                componentsProps={{
                    pagination: {
                        dataLoadType: DataLoadType.CLIENT,
                        RefreshRows: LoadRows,
                        pageSize: props.pageSize ?? defaultPageSize,
                        page: page,
                        setPage: setPage
                    }
                }}
            />
        </div>
    );

BaseDataGrid.tsx:

interface Props extends DataGridProProps {
    initialSortModel: GridSortModel | undefined;
    disableVirtualization?: boolean | undefined;
    setRows?: Function | undefined;
    GetRowsFromResponseObject?: Function | undefined;
    apiString?: string | undefined;
    enablePagination?: boolean;
    CustomNoRowsOverlay?: React.JSXElementConstructor<any> | undefined;
    isPageLoading?: boolean | undefined;
    pageSize?: number | undefined;
}

    return (
        <div className="data-grid-pro-class" data-testid="serverSideDataGrid" style={{ height: '100%', width: '100%' }}>
            <DataGridPro
                {...props}
                localeText={determineLocaleFromBrowserSetting()}
                rowHeight={27}
                headerHeight={47}
                disableSelectionOnClick={true}
                disableVirtualization={props.disableVirtualization ?? false}
                pagination={props.enablePagination ?? true}
                pageSize={props.pageSize ?? defaultPageSize}
                rowsPerPageOptions={[props.pageSize ?? defaultPageSize]}
                components={{
                    Pagination: DiscoverPagination,
                    NoRowsOverlay: props.CustomNoRowsOverlay ?? GridNoRowsOverlay
                }}
                disableMultipleColumnsSorting
                initialState={{
                    sorting: {
                        sortModel: props.initialSortModel
                    }
                }}
            />
            <Backdrop sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} open={props.isPageLoading ?? false}>
                <CircularProgress />
            </Backdrop>
        </div>
    );

在尝试使用这种模块化的组件层次结构之前，我们没有遇到这个问题。我们希望切换到这种格式以重用并强制其他开发人员使用基本的 prop 集。有什么想法吗？