我是新來的反應并嘗試使用最后一個 fm api，但我在使用 json 頁面時遇到了問題。當我嘗試：
class App extends React.Component <{}, {items: Array<String>, DataisLoaded: boolean}> {
constructor(props: any) {
super(props);
this.state = {
items: [],
DataisLoaded: false
};
}
componentDidMount() {
fetch("https://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks&api_key=6808816d086d4c48075217bd2cc178a1&format=json")
.then((res) => res.json())
.then((json) => {
this.setState({
items: json,
DataisLoaded: true
});
})
}
render() {
const { DataisLoaded, items } = this.state;
if (!DataisLoaded) return <div><h1>Pleses wait some time.... </h1></div>;
return (
<div className = "App">
<h1> Fetch data from an api in react </h1>
{Array.from(items).map((item: any) => (
<ol>
Name: { item.name },
</ol>
))}
</div>);
}
我有Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: object with keys).
如何處理這樣的頁面？如何映射它們？我試了好幾次，還是不明白。如何獲取曲目名稱和藝術家姓名？
JSON 頁面如下所示：
{"tracks":{"track":[
{"name":"Bad Habit",
"duration":"0",
"playcount":"8259188",
"listeners":"539192",
"mbid":"",
"url":"https://www.last.fm/music/Steve Lacy/_/Bad Habit",
"streamable":{"#text":"0","fulltrack":"0"},
"artist":{"name":"Steve Lacy","mbid":"ca9766a0-1c30-43e6-a213-bac1334efc4a","url":"https://www.last.fm/music/Steve Lacy"},
"image":[{"#text":"https://lastfm.freetls.fastly.net/i/u/34s/2a96cbd8b46e442fc41c2b86b821562f.png","size":"small"},{"#text":"https://lastfm.freetls.fastly.net/i/u/64s/2a96cbd8b46e442fc41c2b86b821562f.png","size":"medium"},{"#text":"https://lastfm.freetls.fastly.net/i/u/174s/2a96cbd8b46e442fc41c2b86b821562f.png","size":"large"},{"#text":"https://lastfm.freetls.fastly.net/i/u/300x300/2a96cbd8b46e442fc41c2b86b821562f.png","size":"extralarge"}]}
}
],"@attr":{"page":"1","perPage":"50","totalPages":"626758","total":"31337870"}}}
uj5u.com熱心網友回復：
這里的問題是您通過作為物件的軌道和@attr 進行映射。你想要做的是到達軌道內的軌道并映射
items.tracks.track.map
所以你應該做的是在你獲取后做??以下事情
this.setState({
items: json.tracks.track,
DataisLoaded: true
});
接著
{items.map((item: any) => (
<ol>
Name: { item.name },
</ol>
))}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/519587.html
標籤：反应api最后一个.fm
下一篇：壓力表影像校正，垂直旋轉