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

Question

我有一组看起来像下面的 object 的对象，我正在尝试呈现一个列表。 我有其他屏幕以相同的方式呈现相同形状的列表。 我无法弄清楚为什么我会收到这个数组的错误。 promise 处理正确，数据设置为 state。 我要渲染的数据是一个数组。

错误

[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.]

数组：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,
    },
  },

渲染列表

<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

错误消息实际上是非常解释性的。 如果您以下列方式更改代码，例如：

<ListItem.Subtitle>{item.track.album.artists[0].name}</ListItem.Subtitle>

它应该工作。 React 不允许使用Object作为孩子（ item.track.album.artists[0]是对象）。 只允许使用原始类型（通常是字符串或数字）。 item.track.album.artists[0].name是String 。