I have an array of objects that look like the object below and I am trying to render a list. I have other screens that render lists of the same shape in the same manner. I cannot figure out why I am getting an error with this array. The promise is handled correctly and the data is set to the state. The data that I am trying to render is an array.
The error
[Unhandled promise rejection: Error: Objects are not valid as a React child (found: object with keys {external_urls, href, id, name, type, uri}). If you meant to render a collection of children, use an array instead.]
The array: this.state.playlist.items
Array [
Object {
"added_at": "2020-12-06T06:43:39Z",
"added_by": Object {
"external_urls": Object {
"spotify": "https://open.spotify.com/user/",
},
"href": "https://api.spotify.com/v1/users/",
"id": "",
"type": "user",
"uri": "spotify:user:"",
},
"is_local": false,
"primary_color": null,
"track": Object {
"album": Object {
"album_type": "single",
"artists": Array [
Object {
"external_urls": Object {
"spotify": "https://open.spotify.com/artist/4iMO20EPodreIaEl8qW66y",
},
"href": "https://api.spotify.com/v1/artists/4iMO20EPodreIaEl8qW66y",
"id": "4iMO20EPodreIaEl8qW66y",
"name": "Still Woozy",
"type": "artist",
"uri": "spotify:artist:4iMO20EPodreIaEl8qW66y",
},
],
"external_urls": Object {
"spotify": "https://open.spotify.com/album/5mlgzPatuoMGqqHsPIofKr",
},
"href": "https://api.spotify.com/v1/albums/5mlgzPatuoMGqqHsPIofKr",
"id": "5mlgzPatuoMGqqHsPIofKr",
"images": Array [
Object {
"height": 640,
"url": "https://i.scdn.co/image/ab67616d0000b2738d23ae740afca14480db70c8",
"width": 640,
},
Object {
"height": 300,
"url": "https://i.scdn.co/image/ab67616d00001e028d23ae740afca14480db70c8",
"width": 300,
},
Object {
"height": 64,
"url": "https://i.scdn.co/image/ab67616d000048518d23ae740afca14480db70c8",
"width": 64,
},
],
"name": "Wolfcat",
"release_date": "2017-08-31",
"release_date_precision": "day",
"total_tracks": 1,
"type": "album",
"uri": "spotify:album:5mlgzPatuoMGqqHsPIofKr",
},
"artists": Array [
Object {
"external_urls": Object {
"spotify": "https://open.spotify.com/artist/4iMO20EPodreIaEl8qW66y",
},
"href": "https://api.spotify.com/v1/artists/4iMO20EPodreIaEl8qW66y",
"id": "4iMO20EPodreIaEl8qW66y",
"name": "Still Woozy",
"type": "artist",
"uri": "spotify:artist:4iMO20EPodreIaEl8qW66y",
},
],
"disc_number": 1,
"duration_ms": 174221,
"episode": false,
"explicit": true,
"external_ids": Object {
"isrc": "QZ9JZ1701572",
},
"external_urls": Object {
"spotify": "https://open.spotify.com/track/1Hu2OypX8tMPwBcCUaAeO4",
},
"href": "https://api.spotify.com/v1/tracks/1Hu2OypX8tMPwBcCUaAeO4",
"id": "1Hu2OypX8tMPwBcCUaAeO4",
"is_local": false,
"name": "Wolfcat",
"popularity": 63,
"preview_url": "https://p.scdn.co/mp3-preview/b6ac80e632d0c15e097d43083a738bf69ac8bc12?cid=5673f7c36ce34a669e8805ca91f3b103",
"track": true,
"track_number": 1,
"type": "track",
"uri": "spotify:track:1Hu2OypX8tMPwBcCUaAeO4",
},
"video_thumbnail": Object {
"url": null,
},
},
Rendering the list
<View style={{marginBottom: 310}}>
<FlatList
data = {this.state.playlist.items}
renderItem = {({ item }) => (
<ListItem bottomDivider >
<Avatar size={80} source={{uri: item.track.album.images[0].url}} />
<ListItem.Content>
<ListItem.Title>{item.track.name}</ListItem.Title>
<ListItem.Subtitle>{item.track.album.artists[0]}</ListItem.Subtitle>
</ListItem.Content>
<ListItem.Chevron />
</ListItem>
)}
keyExtractor={item => item.track.id}
/>
</View>
The error message is actually quite explanatory. If you change your code in following way, for instance:
<ListItem.Subtitle>{item.track.album.artists[0].name}</ListItem.Subtitle>
it should work. React does not allow to use an Object as a child ( item.track.album.artists[0] is Object). Only primitive types are allowed (typically String or Number). item.track.album.artists[0].name is String .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.