Question

如何循环遍历对象数组并将其数据显示在我的React应用程序上？

它代表歌手列表和带有专辑的嵌套列表。

需要帮助遍历每个艺术家，然后遍历他们的专辑，以显示所有必要的信息。

我希望能够使用react组件在屏幕上显示所有数据。

[
  {
    "id": 1,
    "name": "Jimi Hendrix",
    "cover": "jimi_hendrix",
    "bio": "Lorem ipsum dolor sit amet",
    "albums": [
      {
        "albumId": "a1",
        "title": "Electric Ladyland",
        "year": 1968,
        "cover": "electric-ladyland",
        "price": 20
      },
      {
        "albumId": "a2",
        "title": "Experience",
        "year": 1971,
        "cover": "experienced",
        "price": 25
      },
      {
        "albumId": "a3",
        "title": "Isle of Wright",
        "year": 1971,
        "cover": "isle_of_wright",
        "price": 15
      },
      {
        "albumId": "a4",
        "title": "Band of Gypsys",
        "year": 1970,
        "cover": "band_of_gypsys",
        "price": 10
      }
    ],
    "genre": "rock, blues"
  },
  {
    "id": 2,
    "name": "Madonna",
    "cover": "madonna",
    "bio": "Lorem ipsum",
    "albums": [
      {
        "albumId": "b1",
        "title": "Like a Virgin",
        "year": 1984,
        "cover": "like_a_virgin",
        "price": 20
      },
      {
        "albumId": "b2",
        "title": "True Blue",
        "year": 1986,
        "cover": "true_blue",
        "price": 25
      },
      {
        "albumId": "b3",
        "title": "Erotica",
        "year": 1994,
        "cover": "erotica",
        "price": 15
      },
      {
        "albumId": "b4",
        "title": "Ray of Light",
        "year": 1998,
        "cover": "ray_of_light",
        "price": 10
      }
    ],
    "genre": "pop"
  }
]

Answer 1

这是一个有关如何循环列表和正确呈现组件的完整示例！ See it live!

const data = [
  {
    "id": 1,
    "name": "Jimi Hendrix",
    "cover": "jimi_hendrix",
    "bio": "Lorem ipsum dolor sit amet",
    "albums": [
      {
        "albumId": "a1",
        "title": "Electric Ladyland",
        "year": 1968,
        "cover": "electric-ladyland",
        "price": 20
      },
      {
        "albumId": "a2",
        "title": "Experience",
        "year": 1971,
        "cover": "experienced",
        "price": 25
      },
      {
        "albumId": "a3",
        "title": "Isle of Wright",
        "year": 1971,
        "cover": "isle_of_wright",
        "price": 15
      },
      {
        "albumId": "a4",
        "title": "Band of Gypsys",
        "year": 1970,
        "cover": "band_of_gypsys",
        "price": 10
      }
    ],
    "genre": "rock, blues"
  },
  {
    "id": 2,
    "name": "Madonna",
    "cover": "madonna",
    "bio": "Lorem ipsum",
    "albums": [
      {
        "albumId": "b1",
        "title": "Like a Virgin",
        "year": 1984,
        "cover": "like_a_virgin",
        "price": 20
      },
      {
        "albumId": "b2",
        "title": "True Blue",
        "year": 1986,
        "cover": "true_blue",
        "price": 25
      },
      {
        "albumId": "b3",
        "title": "Erotica",
        "year": 1994,
        "cover": "erotica",
        "price": 15
      },
      {
        "albumId": "b4",
        "title": "Ray of Light",
        "year": 1998,
        "cover": "ray_of_light",
        "price": 10
      }
    ],
    "genre": "pop"
  }
]



const List = ({singers}) => (
  <ul>
    
    {
      singers.map((singer, i) => {
        return <Singer key={i} singer={singer} />
      })
    }
  </ul>
)

const Singer = ({singer}) => (
  <li>
    <p>Name: {singer.name}</p>
    <p>Cover: {singer.cover}</p>
    <p>Bio: {singer.bio}</p>
    <p>Genre: {singer.genre}</p>
    <ul>
      {
        singer.albums.map((album, i) => {
          return <Album key={i} album={album} />
        })
      }
    </ul>
  </li>
)

const Album = ({album}) => (
  <li>
    <p>Title: {album.title}</p>
    <p>Year: {album.year}</p>
    <p>Cover: {album.cover}</p>
    <p>Price: {album.price}</p>
  </li>
)

ReactDOM.render(<List singers={data} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

Answer 2

尝试以下代码：

  {[ { "id": 1, "name": "Jimi Hendrix", "cover": "jimi_hendrix", "bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", "albums": [ { "albumId": "a1", "title": "Electric Ladyland", "year": 1968, "cover": "electric-ladyland", "price": 20 }, { "albumId": "a2", "title": "Experience", "year": 1971, "cover": "experienced", "price": 25 }, { "albumId": "a3", "title": "Isle of Wright", "year": 1971, "cover": "isle_of_wright", "price": 15 }, { "albumId": "a4", "title": "Band of Gypsys", "year": 1970, "cover": "band_of_gypsys", "price": 10 } ], "genre": "rock, blues" }, { "id": 2, "name": "Madonna", "cover": "madonna", "bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", "albums": [ { "albumId": "b1", "title": "Like a Virgin", "year": 1984, "cover": "like_a_virgin", "price": 20 }, { "albumId": "b2", "title": "True Blue", "year": 1986, "cover": "true_blue", "price": 25 }, { "albumId": "b3", "title": "Erotica", "year": 1994, "cover": "erotica", "price": 15 }, { "albumId": "b4", "title": "Ray of Light", "year": 1998, "cover": "ray_of_light", "price": 10 } ], "genre": "pop" } ].map((album) => (
    <div button key={album.albumId}>
      <p>{album.title}</p>
      <p>{album.price}</p>
    </div>
  ))}

如何循环显示相册数据？

2 个答案: