MUIX DataGridPremium 的列自动调整大小属性在不使用 setTimeout 函数的情况下不起作用

Question

我正在使用 DataGridPremium，我想自动设置网格列的宽度。尽管我曾经使用 autosizeOptions 属性网格列，但其内容并不适合。但是当我包装 apiRef.current.autosizeColumns(autosizeOptions); 的代码时setTimeout 函数可以正常工作。如何在不使用 setTimeout 函数的情况下解决该问题？感谢您的支持。

这是我的代码；

import { DataGridPremium, useGridApiRef } from '@mui/x-data-grid-premium';
import React, { useEffect, useState } from 'react';
import { setVariantTableColumns, setVariantTableRows } from '../../data/variantTableRender';

const autosizeOptions = {
    columns: ["SYNM"],
    includeHeaders: true,
    includeOutliers: true
};

export const VariantTable = ({ data }) => {
    const [variantColumns, setVariantColumns] = useState([]);
    const [variantRows, setVariantRows] = useState([]);
    const apiRef = useGridApiRef();

useEffect(() => {
    if (data && data.Layout) {
        const oColumns = setVariantTableColumns(data.Layout); // I'm getting the colums definition from that function
        if (oColumns) {
            setVariantColumns(oColumns);
        }
    }
    if (data && data.Data) {
        const oRows = setVariantTableRows(data.Data);
        if (oRows) {
            setVariantRows(oRows);
        }
    }
}, [data]);

useEffect(() => {
    if (variantColumns.length && variantRows.length) {
        **If I'm not use setTimeout function, grid columns width doesn't auto fit**
        setTimeout(() => {
            apiRef.current.updateRows(variantRows);
            apiRef.current.autosizeColumns(autosizeOptions);
        }, 3000);
    }
}, [variantColumns, variantRows]);

return (
    variantColumns.length && variantRows.length &&
    <DataGridPremium
        apiRef={apiRef}
        rows={variantRows}
        columns={variantColumns}
        density="compact"
        autosizeOnMount={true}
        autosizeOptions={autosizeOptions}>
    </DataGridPremium>
);
};

Answer 1

我认为这是因为

apiRef.current.autosizeColumns(autosizeOptions)

是一个异步函数。对我有用的是在空依赖项 useEffect 中运行它，这样它就可以像这样在加载时运行：

useEffect(() => {
   apiRef.current.autosizeColumns(autosizeOptions)
},[])