我目前正在使用React Native和iTunes的搜索API编写我的第一个应用程序。
我放置了一个TextInput和一个Button,该按钮返回与文本相对应的所有相册。单击相册后,它将获得其唯一的ID,并搜索该相册的详细信息。
export function getAlbumDetailFromApi(id)
{
return fetch('https://itunes.apple.com/lookup?id='+id)
.then((response) => response.json())
.catch((error) => console.log(error));
}
这是课程:
class AlbumDetail extends React.Component {
constructor(props) {
super(props)
this.state = {
album: undefined,
isLoading: true
}
}
componentDidMount() {
console.log(this.props.navigation.state.params.idAlbum)
getAlbumDetailFromApi(this.props.navigation.state.params.idAlbum).then(data => {
this.setState({
album: data,
isLoading: false
})
})
}
_displayLoading() {
if (this.state.isLoading) {
return (
<View style={styles.loading_container}>
<ActivityIndicator size='large' />
</View>
)
}
}
_displayFilm() {
const { album } = this.state
console.log(album.results.artistId)
console.log()
if (album != undefined) {
return (
<ScrollView style={styles.scrollview_container}>
<Text style={styles.title_text}>name of the album should go here</Text>
</ScrollView>
)
}
}
render() {
return (
<View style={styles.main_container}>
{this._displayLoading()}
{this._displayFilm()}
</View>
)
}
}
如果我的相册ID为“ 1474669063”,该函数将返回以下内容:
但是,这是我的问题。也许这很简单,但是我已经尝试了所有发现的内容,但是无法访问数据...
有人可以帮我吗?
正在抓取:
getAlbumDetailFromApi(id) {
return fetch('https://itunes.apple.com/lookup?id='+id)
.then(response => response.json())
.then(data => {
// set the state here, we access the first object of the results array with data.results[0}
this.setState({album: data.results[0]})
})
.catch((error) => console.log(error));
}
渲染方法:
componentDidMount() {
this.getAlbumDetailFromApi(1474669063);
}
renderAlbum() {
// if we have an album display it
if (this.state.album) {
return (
<View>
<Text> Arist: {this.state.album.artistName}</Text>
<Text> Release Date: {this.state.album.releaseDate}</Text>
</View>
);
}
}
render() {
console.log('state', this.state);
return (
<View style={styles.container}>
{this.renderAlbum()}
</View>
);
}
演示版
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句