React 中的地图正在渲染所有项目的所有图像，而不是显示一个项目的图像

Question

我正在创建一个投资组合网站。当用户点击项目卡上的“查看更多”时，我试图做到这一点，将会弹出一个显示该特定项目的更多图像的窗口。然而，当用户点击“查看更多”时，所有项目的所有图像都会显示在弹出窗口中。

如何才能只显示该项目的图像？

这里是项目卡的代码

                        <div>
                        <p>view {projectData.call_to_view}</p>
                        </div>
                        <div>
                        <div>
                        <button onClick={() => setButtonPopUp(true)}>Open</button>
                            <PopUp trigger={buttonPopUp} setTrigger={setButtonPopUp}>
                            </PopUp>
                        </div>

这是弹出窗口的代码

功能弹出（道具）{

return (props.trigger) ? (
    <div className='popup'>
        <div className='popup-inner'>
            <button className="close-btn" onClick={() => props.setTrigger(false)}>close</button>
            <h1>my pop up</h1>
            <div>
                {allProjects.map((projectData, key) => {
                    return <PopUpContent key = {key} projectData={projectData} />;
                        })}
            </div>
        </div>
    </div>
) : "";

}

导出默认弹出窗口；

Here is the component for the content within the pop up

导入'./PopUpContent.css';

函数弹出内容（道具）{ const {projectData} = 道具； 返回 （ ); }

导出默认的 PopUpContent；

Here is my data.js. I won't spam you with all my projects - but this basically how I structured it

export const allProjects = [ { 编号：1， 公司：“澳大利亚协会”， 年份：“2019”， 标题：“国会”， 类型：“网站，营销材料，标牌”， 描述：“为澳大利亚领先的牙科会议 Congress 创建流行艺术主题资产，例如展台、14 个展览特色、8 个登记台和各种标志。还与开发人员一起设计网站并与其他团队合作以满足他们的设计需求。", 图片：“https://i.postimg.cc/CL2Q8PDn/Congress-ADA-mockup2.jpg”， call_to_view：“资产”， image_detail1: "https://fakeimg.pl/300x250?text=congress+image+1", image_detail2: "https://i.postimg.cc/CL2Q8PDn/Congress-ADA-mockup2.jpg", image_detail3：“https://i.postimg.cc/CL2Q8PDn/Congress-ADA-mockup2.jpg”，

},

我原以为在使用地图时它只会显示该项目的图像。