React中点击图片后如何匹配ID展示对应弹窗图片？

问题根源 #

你当前的代码在contents.map循环里为每个图片都渲染了一个PageComponent，所有弹窗共用同一个isOpen状态。当点击任意图片触发弹窗时，所有弹窗都会被激活显示，但最后一个弹窗会覆盖前面的，导致视觉上只看到最后一张图；同时没有记录当前点击的内容，无法匹配对应图片。

修复步骤 #

1. 新增状态存储当前选中的内容，用来匹配弹窗要显示的图片
2. 将PageComponent移到循环外部，只渲染一个弹窗实例
3. 修改点击事件，点击图片时同时记录选中内容并打开弹窗
4. 在弹窗中根据选中的内容渲染对应图片

修改后的完整代码 #

import { useState } from 'react';

export default function MyPhotos() {
  // 新增状态存储选中的内容，初始为null
  const [selectedContent, setSelectedContent] = useState(null);
  // 控制弹窗开关的状态
  const [isOpen, setIsOpen] = useState(false);

  // 修改点击事件：传入当前点击的content，设置选中项并打开弹窗
  const openNewPage = (content) => {
    setSelectedContent(content);
    setIsOpen(true);
  };

  // 关闭弹窗时清空选中项
  const closeNewPage = () => {
    setIsOpen(false);
    setSelectedContent(null);
  };

  return (
    <div>
      {/* 遍历渲染所有缩略图 */}
      {contents.map((content) => (
        <div key={content.id}>
          <img
            onClick={() => openNewPage(content)}
            src={content.image}
            alt={content.text}
          />
        </div>
      ))}

      {/* 只渲染一个弹窗，放在循环外部 */}
      <PageComponent isOpen={isOpen} onClose={closeNewPage}>
        {/* 只有选中内容存在时才渲染图片 */}
        {selectedContent && (
          <img
            src={selectedContent.image}
            alt={selectedContent.text}
          />
        )}
      </PageComponent>
    </div>
  );
}

额外提醒 #

你提供的contents数组中第一个对象缺少image属性（只有item_key），建议统一数组结构，避免渲染时出现src为undefined的问题。

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