TypeScript和Reactjs中接口内的对象数组引起的麻烦

问题描述

我开始将代码转换为TypeScript，但由于某种原因我无法正常工作。

该代码未给出错误，但未显示列表。

type song = {
    id: number,artist: string,titre: string;
    links: string[] | number,has_youtube_link: number,has_picture: number,hour: number,minutes: number,Votes: number
}
interface Songs {
    listofSongs: song[]
}
const LastPlayedSongs: React.FC = () => {
    const [songs,setSong] = useState<Songs | null>(null)

    useEffect(() => {
        fetch("APILink")
            .then(response => response.json())
            .then(response => {
                setSong(response);
            })
            .catch(err => {
                console.log(err);
            });
    },[])
    return (
       <>
           <ul>
               {songs?.listofSongs?.map((song) => (
                   <li key={song.id}>{song.titre},{song.id}</li>
                ))}
           </ul>
       </>
    );
}

如果我直接使用歌曲类型而不是“歌曲”界面，它将起作用。

type song = {
    id: number,Votes: number
}

const LastPlayedSongs: React.FC = () => {
    const [songs,setSong] = useState<song[] | null>(null)

    useEffect(() => {
        fetch("APILink")
            .then(response => response.json())
            .then(response => {
                setSong(response);
            })
            .catch(err => {
                console.log(err);
            });
    },[])
    return (
        <>
            <ul>
                {songs?.map((song) => (
                    <li key={song.id}>{song.titre},{song.id}</li>
                ))}
            </ul>
        </>
    );
}

有人知道如何使第一个变得更糟或提供一些有关我做错事情的信息。

亲切的问候

解决方法

您应该更改界面或将状态正确设置为object属性。

1. type Songs = song []然后useState<Songs>([])然后setSong(response)
2. 您当前拥有什么作为界面，然后setSong({listOfSongs:response})

最好不要使您的状态为可空，它是一个数组，最初可以是一个空数组