React-Native：未处理的 promise 拒绝：错误：对象作为 React 子对象无效

Question

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>

Answer 1

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 .