问题描述与常见误区
在react应用中，开发者经常需要展示一个图片列表，并允许用户点击其中一张图片以在新页面或模态框中查看详情。然而，一个常见的实现错误会导致无论点击哪张图片，详情页总是显示列表中的最后一张图片。这种现象通常源于以下不当实践：
- 单一状态控制多个组件实例： 使用一个全局的 isOpen 状态来控制所有 PageComponent 实例的显示，导致所有实例同时响应状态变化。
- 在 map 循环内部渲染模态组件： 将 PageComponent（通常是模态框或详情页）放置在 map 循环内部，为数组中的每个数据项都渲染一个 PageComponent 实例。
- 通过 children 传递动态内容： 尝试将 <img> 标签作为 PageComponent 的 children 传递，且其 src 属性直接引用 map 循环中的 content.image。当 isOpen 状态改变导致组件重新渲染时，这些 children 的上下文可能已经指向了 map 循环的最后一个迭代值。
以下是导致此问题的典型错误代码结构：
// 原始的错误实现示例
import React, { useState } from 'react';
// 模拟图片数据
const contents = [
{ id: 0, image: 'https://via.placeholder.com/150/FF0000?text=Img0', text: 'ABC' },
{ id: 1, image: 'https://via.placeholder.com/150/00FF00?text=Img1', text: 'ABCD' },
{ id: 2, image: 'https://via.placeholder.com/150/0000FF?text=Img2', text: 'ABCDE' },
];
// 假设 PageComponent 是一个模态框组件
function PageComponent({ isOpen, onClose, children }) {
if (!isOpen) return null; // 如果不打开，则不渲染
return (
<div style={{ /* 模态框背景样式 */ }}>
<div style={{ /* 模态框内容样式 */ }}>
<button onClick={onClose}>X</button>
{children} {/* 接收并显示子元素 */}
</div>
</div>
);
}
export default function MyPhotos() {
const [isOpen, setIsOpen] = useState(false);
const openNewPage = () => {
setIsOpen(!isOpen); // 切换模态框的显示状态
};
return (
<div>
{contents.map((content) => {
return (
<div key={content.id}>
<img
onClick={openNewPage} // 点击图片时打开模态框
src={content.image}
alt={`Image ${content.id}`}
/>
{/* 错误：在map内部为每个item渲染PageComponent，且img作为children传递 */}
<PageComponent isOpen={isOpen} onClose={openNewPage}>
< 
