如何扩展React单艺人页面的数组匹配以包含合作作品？

我用React开发项目，拥有artists和releases两个数据数组。目前在SingleArtist页面中，通过匹配ArtistID字段展示该艺人的发行作品。现希望扩展功能：当艺人以合作艺人（featuredartist）身份参与某发行作品时，也将该作品展示在其个人页面下。例如发行作品A的主艺人为A，混音师为B，需在B的页面中显示该发行作品。请问能否通过对数组进行额外过滤实现此需求？

releases.json示例 #

{
  "id": 9,
  "artistID": "SU",
  "featuredartist": "ES, FG",
  "imageURL": "../images/releases/dulcie.jpg",
  "title": "Dulcie Caught a Cricket",
  "description": "Released 2020",
  "artist": "Sumsuch",
  "buy": "https://www.beatport.com/release/we-choose/1916121",
  "stream": "https://open.spotify.com/album/4cutoknbgciTGGpAYSZXfK?si=gsNvR6ytTN6KdrPORfSLOg"
}

artists.json示例（第二个对象为混音师，id:0，作为合作艺人出现在某作品中，需在其页面展示该作品） #

[
  {
    "id": 3,
    "artistID": "SU",
    "imageURL": "./images/sumsuch.jpg",
    "singleimageURL": "../images/artists/sumsuch.jpg",
    "name": "SUMSUCH",
    "bio": "Will Sumsuch has been a musician, producer and DJ",
    "soundcloud": "sumsuch"
  },
  {
    "id": 0,
    "artistID": "ES",
    "imageURL": "./images/artists/ericblue.jpg",
    "singleimageURL": "../images/artists/ericblue.jpg",
    "name": "ERIC SHANS",
    "bio": "A producer and DJ residing in Brooklyn, NY"
  }
]

singleartist.js简化代码 #

function SingleArtist() {
  const { id } = useParams() // 从路由参数获取艺人ID并匹配对应艺人
  const artist = artists.find((a) => a.id === +id)
  // 筛选出发行作品中artistID与当前艺人artistID一致的作品
  const releaseList = releases.filter((b) => b.artistID === artist.artistID)
  const { singleimageURL, name, soundcloud, bio } = artist

  return (
    <Wrapper>
      <div className="artist-container">
        <div className='item'>
          <div className='image'>
            <img className='artist' src={singleimageURL} alt={name} />
          </div>
          <div className="description">
            <p className='name'>
              {name}
            </p>
            <p className='bio'>
              {bio}
            </p>
          </div>
          <a href={'https://soundcloud.com/' + soundcloud} target="_blank" rel="noreferrer">
            Listen to {name}'s Soundcloud
          </a>
        </div>
      </div>
      <span>
        <Link className='link-back' to="/artists"> Back To Artists</Link>
      </span>

      <div className="matches">
        <h4> Releases by {name} </h4>
        {releaseList.map(release => {
          const { imageURL, name, id, buy } = release;
          return (
            <div className="item" key={id}>
              <a href={buy} target="_blank" rel="noreferrer">
                <img className="image" src={imageURL} alt={name} />
              </a>
            </div>
          )
        })}
      </div>
    </Wrapper>
  )
}

完全可以通过扩展过滤条件实现需求，只需修改releaseList的过滤逻辑，同时判断两个条件：

1. 作品的主艺人artistID与当前艺人的artistID一致
2. 作品的合作艺人列表featuredartist中包含当前艺人的artistID

修改后的过滤代码 #

const releaseList = releases.filter((release) => {
  // 将逗号分隔的合作艺人ID字符串转为数组，并去除每个ID前后的空格
  const featuredArtists = release.featuredartist?.split(',').map(id => id.trim()) || [];
  // 匹配主艺人或合作艺人
  return release.artistID === artist.artistID || featuredArtists.includes(artist.artistID);
});

细节说明 #

• 使用?.可选链操作符，避免部分作品无featuredartist字段时出现报错
• map(id => id.trim())处理类似"ES, FG"带空格的情况，确保ID匹配准确
• 如果需要区分主作品和合作作品，可在渲染时添加标识（比如给合作作品图片加“feat”标签）

内容的提问来源于stack exchange，提问作者erics15