javascript - 获取数据时如何更新@mui/x-data-grid表

Question

我有一个关于如何在 DataGrid 中更新数据的问题来自 @mui/x-data-grid 的组件模块位于 React如果有人有使用 Material UI 库在表格中显示数据的经验。我遇到的问题是在 API 获取完成后更新表中的数据。我正在使用react-query从 API 获取数据并希望用这些数据填充表。但是，即使获取完成后，我仍然得到 No rows消息如下表所示。

这对我来说没有意义。正如您在下面的控制台中看到的，在 react-query 中加载阶段完成后，数据正​​在正确获取。 。我每 1000 毫秒重新获取一次数据，只是为了强调此数据从 API 正确返回的事实。正如您所看到的，正如我所期望的那样，一个由 3 个对象组成的数组从 API 返回到客户端:

这是我正在经历的代码过程:

首先我用 react-query 创建了一个钩子(Hook)从 API 获取此数据

export default function useFetchArtistSongs() {
    const { artist } = useUserData();
    const { _id } = artist;
    return useQuery(['fetchArtistSongs'], async () => {
        const artistSongsResponse = await axios({
            method: 'GET',
            url: `http://localhost:2000/api/get-artist-audio/${_id}`,
        }).then(response => {
            return response.data;
        });
        return artistSongsResponse;
    },  {
            refetchInterval: 3600000,
        },
    );
}

接下来，我创建了一个dataLayer在呈现表格的组件中，以便我可以将数据属性(对象列表)传递到显示表格的显示层:

function useDataLayer() {
    const { data: artistSongs = [], isLoading } = useFetchArtistSongs();

    return {
        artistSongs,
        isLoading,
    };
}

我给对象数组一个默认值以避免 undefined错误，我还得到 isLoading属性来自useQuery钩子(Hook)。

我最终将数据传递到我的组件，然后传递到表:

function ClipsTableTest_DisplayLayer({
    artistSongs,
    isLoading,
}: ClipsTableDisplayLayerProps) {
    console.log(artistSongs);
    return (
        <ClipsTableContainer>
            <DataGrid 
                columns={columns}
                getRowId={(row: any) => row._id}
                loading={isLoading}
                rows={artistSongs}
                rowHeight={100}
                autoHeight
                autoPageSize
                disableColumnSelector
                disableRowSelectionOnClick
                hideFooterSelectedRowCount
            />
        </ClipsTableContainer>
    );
}

当我记录artistSongs时如果我将重新获取率设置为 1000 毫秒，它会不断更新并记录数据。 react-query中的陷阱也已更新。该表似乎是唯一没有获取更新数据的东西。

我尝试使用 useEffect钩子(Hook)，以便在数据更新时设置状态变量，并将状态变量传递给 DataGrid 的 rows 属性。 ，但这也失败了。我也尝试过useMemo得到相同的结果。我什至直接放弃了良好的编程结构并调用 axios 获取数据直接在此组件的显示层中 -> 一旦响应返回就更新状态变量 -> 和相同的 No rows消息出现。

如果这有点啰嗦，我很抱歉，但我只是想澄清一下。

Answer 1

数据未显示，因为 autoPageSize和autoHeight设置在 <DataGrid /> 。出现此问题的原因是the autoHeight scales the height according to the pageSize .

要修复这些问题，您可以删除 autoPageSize支持或删除 autoHeight prop 并显式设置高度，最有可能在 <ClipsTableContainer /> 中