Javascript 使用React显示对象详细信息

我有一个项目，我有一个数组，我循环通过。项目正常运行。我正在使用React Router和useParams来实现项目功能

我试图在每个对象的底部显示按钮。这将只显示该对象的详细信息，而不显示其他内容

App.js（所有组件都在这里）

从'react'导入{useState}；
导入“/App.css”；
从“/HeroeList”导入HeroeList；
从“/NavBar”导入导航栏；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}
从“/AddHero”导入AddHero；
从“/HeroDetail”导入HeroDetail；
函数App（）{
const[英雄，设置英雄]=使用状态([
{heroName:'超人'，图：'https://cosmicbook.news/sites/default/files/henry-cavill-justice-league-brhv.jpg超人出生在氪星上，出生时被命名为卡尔·埃尔。在他还是婴儿的时候，他的父母在氪星被一只天然猫摧毁前的一刹那，把他送到了一艘小型宇宙飞船上aclysm'，id:1}，
{heroName:'Flash'，图片：'https://hdqwalls.com/wallpapers/flash-justice-league-unite-2017-on.jpg’，鲍尔斯：'超高速，时间旅行'，传记：'巴里·艾伦是闪电侠，世界上跑得最快的人。利用他的超高速能力，他利用速度力量，成为一名穿着服装的犯罪斗士'，id:2}，
{heroName:'神奇女人'，图：'https://images.hdqwalls.com/download/justice-league-wonder-woman-2018-yy-1080x2160.jpg”，鲍尔斯：《力量、速度、真理的套索》，传记：“神奇女侠是戴安娜王妃，是亚马孙女王希波莉塔和宙斯的女儿，奥林匹斯最强大的神。”，id:3}，
{heroName:'蝙蝠侠'，图：'https://images.hdqwalls.com/download/batman-justice-league-unite-2017-qu-720x1280.jpg”，鲍尔斯：《超级情报》，传记：“《蝙蝠侠》是高谭市的超级英雄保护者，一个饱受折磨、沉思的义务警员，装扮成一种人类蝙蝠，与邪恶作斗争，让世界各地的罪犯心中充满恐惧。”4}
])
返回(
);
}
导出默认应用程序；

HeroeList.js（显示所有对象以及每个对象下的按钮）

从“react router dom”导入{Link}；
const HeroeList=（{heroes}）=>{
报税表（
{heroes.map（heroe=>
{heroe.heroName}
超级大国：{heroe.powers}

传记：{heroe.bio}

阅读更多
)}
);
}
导出默认HeroeList；

HeroDetail.js（这不显示任何内容）

从“react router dom”导入{useParams}；
常量HeroDetail=（道具）=>{
康斯特英雄=道具英雄；
const{id}=useParams（）；
报税表（
{heros.id}
{英雄，英雄名字}

{英雄，力量}

{英雄传记}

);
}
导出默认细节；

路由路径和链路不同：

<Route path="/HeroDetail/:id">
  <HeroDetail heroes={heroes}/>
</Route>

而链接是

<Link to={`heroes/${heroe.id}`}>
  <button>Read more</button>
</Link> 

阅读更多

因此，要么将路由路径更改为

/heros/：id

或

---

将链接更新为

/herodeil/${heroe.id}

路由路径和链接不相同：

<Route path="/HeroDetail/:id">
  <HeroDetail heroes={heroes}/>
</Route>

而链接是

<Link to={`heroes/${heroe.id}`}>
  <button>Read more</button>
</Link> 

阅读更多

因此，要么将路由路径更改为

/heros/：id

或

---

将Link更新为/herodail/${heroe.id}使用筛选和映射方法后，我能够解决该问题。这允许我根据传入的useParams筛选数组。另外，要使用的逻辑运算符需要是“==”而不是“=”

从“react”导入{useState}； 从“react router dom”导入{useParams}

const GetItems=（{heroes}）=>{ const{id}=useParams（）； 返回( {heros.filter（superHero=>superHero.id==id）.map（newSuperArray=>( {newSuperArray.heroName} {newSuperArray.powers}

{newSuperArray.bio}

))} ); }

---

导出默认项目

在使用过滤器和映射方法后，我能够解决该问题。这允许我根据传入的useParams筛选数组。另外，要使用的逻辑运算符需要是“==”而不是“=”

从“react”导入{useState}； 从“react router dom”导入{useParams}

const GetItems=（{heroes}）=>{ const{id}=useParams（）； 返回( {heros.filter（superHero=>superHero.id==id）.map（newSuperArray=>( {newSuperArray.heroName} {newSuperArray.powers}

{newSuperArray.bio}

))} ); }

---

导出默认项目

我已经更新了指向/HerDetail/的两个链接，但仍然没有更改我已经更新了指向/HerDetail/的两个链接，但仍然没有更改

<Link to={`heroes/${heroe.id}`}>
  <button>Read more</button>
</Link>