React-player无法仅播放映射数组中选中视频条目问题求助

问题根源 #

你两次代码的核心问题都是把Modal组件放在了视频列表的map循环内部，同时所有Modal共用同一个全局开关状态：

1. 第一版代码里所有Modal共享open状态，一旦触发setOpen(true)，循环生成的所有Modal会同时打开，每个Modal内的ReactPlayer都会自动播放对应视频，自然会出现同时播放多个视频的问题
2. 第二版你虽然加了选中视频ID的状态，但Modal还是放在循环里，所有Modal的open属性都绑定了modalIsOpen，开关触发后还是所有Modal同时打开，就算所有播放器的URL都指向你选中的ID，也会出现多个播放器同时播放同一个视频的问题，可能还会伴随音画重叠、卡顿等异常

修复方案 #

把Modal组件从map循环里拿出来，放在组件的最外层return里，全局只保留一个Modal实例即可，调整后的代码逻辑如下：

export default function Playlist({ videos }) {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  // 存储选中的视频ID
  const [selectedVideoId, setSelectedVideoId] = useState(null);
  const videoURL = "https://www.youtube.com/watch?v=";

  // 提前统一处理视频的排序、过滤逻辑
  const sortedVids = videos
    .sort((a, b) =>
      Number(
        new Date(b.contentDetails.videoPublishedAt) -
          Number(new Date(a.contentDetails.videoPublishedAt))
      )
    )
    .filter((v) => v.snippet.title !== 'Private video')

  // 关闭弹窗时同步清空选中ID，避免下次打开时残留旧视频瞬间播放
  const handleCloseModal = () => {
    setModalIsOpen(false);
    setSelectedVideoId(null);
  };

  return (
    <>
      {/* 只渲染视频列表，Modal移出循环 */}
      {sortedVids.map((vid, id) => {
        return (
          <div className={styles.item_container} key={id}>
            <div className={styles.clip_container}>
              <Image
                className={styles.thumbnails}
                src={vid.snippet.thumbnails.medium.url}
                layout="fill"
                objectFit="cover"
                alt={vid.snippet.title}
              />
              <button
                className={styles.playBtn}
                onClick={() => {
                  // 点击时存储选中的视频ID再打开弹窗
                  setSelectedVideoId(vid.snippet.resourceId.videoId);
                  setModalIsOpen(true);
                }}
              >
                <Image
                  src="/images/play.svg"
                  width="60"
                  height="60"
                  alt="播放按钮"
                />
              </button>
            </div>
            <div className={styles.details_container}>
              <h3>{vid.snippet.title}</h3>
            </div>
          </div>
        );
      })}

      {/* 全局唯一Modal实例 */}
      <Modal
        open={modalIsOpen}
        onClose={handleCloseModal}
        center
        classNames={{
          overlay: "customOverlay",
          modal: "customModal",
          overlayAnimationIn: "customEnterOverlayAnimation",
          overlayAnimationOut: "customLeaveOverlayAnimation",
          modalAnimationIn: "customEnterModalAnimation",
          modalAnimationOut: "customLeaveModalAnimation",
        }}
        animationDuration={800}
      >
        {/* 只有选中ID存在时才渲染播放器，避免加载无效链接报错 */}
        {selectedVideoId && (
          <ReactPlayer
            playing={true}
            url={`${videoURL}${selectedVideoId}`}
            width="100%"
            height="calc(100vh - 100px)"
          />
        )}
      </Modal>
    </>
  );
}

额外优化说明 #

• 关闭弹窗时同步清空选中的视频ID，避免下次打开弹窗瞬间先播放上一次选中的视频再切换到新视频的问题
• 给播放器加了判空渲染逻辑，避免选中ID为空时加载无效链接报错
• 把视频过滤、排序逻辑提前统一处理，降低JSX部分的复杂度，提升代码可读性

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