安排 Axios 响应数据以适合我的 TypeScript 界面

Question

我创建了一个名为 'ServerData' 的接口，它包含一个对象 - 我从 Musixmatch API 请求的歌曲数据。我想用 Axios 获取一首歌曲，然后将它放在 initialState 中，但由于我是界面新手，我不确定如何操作我的响应以使其适合 ServerData 界面。

当我将鼠标悬停在错误上时，它显示： Type '{ randomSong: object; }' is not assignable to type 'never'

万一它是相关的，在我将 TypeScript 添加到项目之前，Axios 提取工作正常，我的前端能够获取歌曲数据，只是那时我没有使用接口所以没有问题。

Picture of the code in question

Answer 1

根据您收到的错误消息，问题不在于 axios 响应的类型——而是 setInitialState 的类型。它告诉你 setInitialState 只能接受一个空数组 (never[])。

我猜 setInitialState 来自 useState 钩子？调用 useState 时并不总是需要设置泛型，因为有时可以从初始值正确推断出它，但在这种情况下需要这样做。当初始数组为空时，Typescript 不可能知道什么类型的元素可以包含在数组中。你必须告诉它。

更改您的 useState 调用以包含像这样的泛型：

const [initialState, setInitialState] = useState<ServerData[]>([]);

Arranging Axios response data to fit my TypeScript interface