React中如何根据artistID匹配数组展示对应艺人的发布内容？

核心问题修正 #

你当前代码中用releases.find((b) => b.id === +id)是通过发布项的id匹配，但发布项的id与艺人的id没有关联，正确逻辑应该通过**艺人的artistID**筛选所有匹配的发布内容。

修改后的完整代码 #

import { Link } from 'react-router-dom'
import { useParams } from 'react-router-dom';
import artists from '../data/artists.json'
import releases from "../data/releases.json";

function SingleArtist() {
  const { id } = useParams()
  // 匹配当前艺人，将url参数转为数字类型，同时处理艺人不存在的情况
  const artist = artists.find((a) => a.id === +id);

  // 艺人不存在时返回提示
  if (!artist) {
    return <div>艺人不存在</div>;
  }

  // 筛选出当前艺人的所有发布作品
  const artistReleases = releases.filter((release) => release.artistID === artist.artistID);

  return (
    <div className="artist-container">
      <div className='item'>
        <h3> Artist Info </h3>
        <p>{artist.name}</p>
        <div className='image'>
          <img src={artist.singleimageURL} alt={artist.name} />
        </div>
        <div className="info">
          {artist.bio}
        </div>
      </div>
      
      <a href={'https://soundcloud.com/' + artist.soundcloud} target="_blank" rel="noreferrer">
        Soundcloud
      </a>
      
      <h3>
        <Link className='link-back' to="/artists"> Back To Artists</Link>
      </h3>
      
      <h4> Releases by this artist </h4>
      <div className="matches">
        {/* 渲染匹配的发布内容 */}
        {artistReleases.length === 0 ? (
          <p>暂无发布作品</p>
        ) : (
          artistReleases.map((release) => (
            <div key={release.id} className="release-item">
              <img src={release.imageURL} alt={release.title} />
              <h5>{release.title}</h5>
              <p>{release.description}</p>
              <div className="release-links">
                <a href={release.buy} target="_blank" rel="noreferrer">购买</a>
                <a href={release.stream} target="_blank" rel="noreferrer">播放</a>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  )
}

export default SingleArtist;

关键说明 #

1. 筛选逻辑：使用Array.filter()替代find()，能获取所有与当前艺人artistID匹配的发布项，而不是单个项。
2. 异常处理：增加!artist判断，避免用户访问无效艺人ID时出现报错；同时判断发布列表长度，无匹配内容时显示友好提示。
3. 循环渲染：用map()遍历筛选后的发布数组，每个项添加唯一key（使用发布项的id），按需渲染发布的图片、标题、操作链接等内容。
4. 冗余清理：移除原代码中无效的release匹配、a/b变量定义等冗余代码。

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