TypeScript & Reactjs 界面内的对象数组出现问题

Question

我开始将代码转换为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,
artist: string,
titre: string;
links: string[] | number,
has_youtube_link: number,
has_picture: number,
hour: number,
minutes: 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>
</>
);
}

有人知道如何让第一个工作或提供一些关于我做错了什么的信息吗。

问候

Answer 1

您应该更改接口或将状态正确设置为对象属性。

1. type Songs = song []然后useState<Songs>([])然后setSong(response)
2. 您当前拥有的接口是setSong({listOfSongs:response})

最好不要让你的状态为null，它是一个数组，最初可以是一个空数组