React中@mui/x-data-grid表格API取数后不更新的问题求助

问题现象 #

• 使用react-query从API获取数据，控制台确认已成功获取3条数据，但DataGrid始终显示“No rows”提示
• 将react-query重拉间隔设为1000ms后，控制台持续打印更新的数据，但表格完全无变化
• 尝试过通过useEffect存储状态变量、useMemo优化、直接在展示层用axios取数更新状态，均未解决问题

代码流程 #

1. react-query取数钩子 #

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,
        },
    );
}

2. 数据层封装 #

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

    return {
        artistSongs,
        isLoading,
    };
}

3. DataGrid展示层 #

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>
    );
}

解决方法 #

1. 修正react-query缓存key #

当前缓存key未包含artist._id依赖，导致artist变化时不会触发新请求。修改缓存key为：

['fetchArtistSongs', _id]

2. 验证API返回数据结构 #

• 确认response.data是数组类型，若API返回嵌套结构（如{ data: [...] }），需提取数组：

  return response.data.data; // 根据实际返回结构调整
  

• 确认每条数据存在唯一的_id字段（与getRowId配置对应）

3. 检查columns字段匹配度 #

确保columns中每个配置的field值与artistSongs数据的字段完全一致，否则表格无法渲染对应内容。

4. 移除不必要的状态中转 #

react-query返回的data本身是响应式的，无需通过useEffect或useMemo额外复制状态，直接传递给DataGrid即可避免数据不同步问题。

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