React JS -检查对象数组中是否包含更多对象

Question

请帮帮我。我只想在<div className="songs-list-header-col">Album</div>数组包含artist属性作为对象时才显示tracks。我有一些场景，在那里艺术家不是一个对象，我不想显示<div>。我该怎么办呢。

tracks [
0:{
   album: {id: 1, album_name: "Fearless (Taylor's Version)"}
   artist: {id: 1, artist_name: "Taylor Swift"}
   genre: "POP"
   id: 1
   time: "00:03:49"
   track_name: "Love Story"
},
1: {
   album: {id: 1, album_name: "Fearless (Taylor's Version)"}
   artist: {id: 1, artist_name: "Taylor Swift"}
   genre: "POP"
   id: 2
   time: "00:03:40"
   track_name: "You Belong With Me"
},
2: {
   album: {id: 2, album_name: "Divide"}
   artist: {id: 2, artist_name: "Ed Sheeran"}
   genre: "POP"
   id: 4
   time: "00:04:23"
   track_name: "Perfect"
}
]

我知道map不是解决方案，但我试过了，它给出了解决方案，但就像map工作一样，它会打印div 3次。但是我想要的是检查artist是否是一个对象。如果是对象，则打印div。

{
  tracks.map((track) => {
    return (
      typeof track.artist === 'object' &&
        <div className="songs-list-header-col">Album</div>
    )
  })
}

我也不能像tracks[0].artist那样直接检查，它给出了类型错误。我该怎么办呢。

Answer 1

你可以做到

tracks.filter(track => typeof track.artist === 'object')
      .map(track => <div className="songs-list-header-col">Album</div>)