useEffect不断返回空数据。以下是我的TypeScript应用中的代码：

import TracksListing from './TracksListing';
import axios, { AxiosResponse } from 'axios'
import { useEffect, useState } from "react";

interface AlbumDetailsProps {
    id?: string
}

const AlbumDetails: React.FC<AlbumDetailsProps> = ({ id }) => {

    const [albums, setAlbums] = useState<AxiosResponse | null | any | void>([]);

    useEffect(() => {

        const fetchAlbum = async () => {
            try {
                const albumData = await axios.get(`http://localhost:8080/api/v1/album/${id}`);
                setAlbums(albumData.data);
                console.log(albums)
                console.log("this is the ID:", id)
            } catch (error) {
                console.log(error);
              }
        }

        fetchAlbum();

    }, [])

return (
                    <>
                    {albums && albums.map((album: any) => ( 
                        album.tracks.trackTitles.map((title: string, index: number) => (
                            <TracksListing number={index + 1} title={title} artist={album.artist} length={album.tracks.trackLengths[index]} />
                        ))
                    ))}
                    </>
)

如果我使用该地址中的任何ID访问localhost：8080，数据就会显示在那里，所以我知道如果我能找出问题所在，就可以为我的网页读取它。albums.map不是一个函数”错误，我认为这是由于数据为空而导致数据Map不起作用。
让我困惑的是，我之前让它处于半工作状态，这样当我加载页面时，什么也不显示，然后转到VS代码并按Ctrl+S，突然它会显示数据已获得，尽管它仍然不会将数据呈现到页面上。
我试过设置useEffect对albums状态变量或id的依赖关系，但没有用。我用这个完全相同的useEffect在另一个组件中获取不同的数据集，出于某种原因，它在那里工作。我不明白是什么让这个情况不同。