Question

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

我正在尝试显示每个对象底部的按钮。那只会显示该对象及其详细信息，而不会显示其他任何内容。

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

import { useState } from 'react';
import './App.css';
import HeroeList from './HeroeList';
import NavBar from './NavBar';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import AddHero from './AddHero';
import HeroDetail from './HeroDetail';

function App() {
  const [heroes, setHeroes] = useState([
    { heroName: 'Superman', pic: 'https://cosmicbook.news/sites/default/files/henry-cavill-justice-league-brhv.jpg', powers: 'Flight, Speed, Strength', bio: 'Superman was born on the planet Krypton and was given the name Kal-El at birth. As a baby, his parents sent him to Earth in a small spaceship moments before Krypton was destroyed in a natural cataclysm', id: 1 },
    { heroName: 'Flash', pic:'https://hdqwalls.com/wallpapers/flash-justice-league-unite-2017-on.jpg', powers: 'Super Speed, Time Travel', bio: 'Barry Allen is The Flash, the fastest man alive. Using his super-speed powers, he taps into the Speed Force and becomes a costumed crime-fighter', id: 2},
    { heroName: 'Wonder-Women', pic:'https://images.hdqwalls.com/download/justice-league-wonder-woman-2018-yy-1080x2160.jpg', powers: 'Strength, Speed, Lasso of truth', bio: 'Wonder Woman is the princess Diana, the daughter of Hippolyta, Queen of the Amazons and Zeus, the mightiest of the Gods of Olympus.', id: 3},
    { heroName: 'Batman',pic:'https://images.hdqwalls.com/download/batman-justice-league-unite-2017-qu-720x1280.jpg', powers: 'Super intelligence', bio:'Batman is the superhero protector of Gotham City, a tortured, brooding vigilante dressed as a sort of human bat who fights against evil and strikes fear into the hearts of criminals everywhere.', id: 4}
  ])
  return (
    <Router>
      <div className="App">
        <NavBar />
        <Switch>
          <Route exact path="/">
            <HeroeList heroes={heroes}/>
          </Route>
          <Route path="/AddHero">
            <AddHero />
          </Route>
          <Route path="/HeroDetail/:id">
            <HeroDetail heroes={heroes}/>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

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

import { Link } from "react-router-dom";

const HeroeList = ({ heroes }) => {
    
    return ( 
        <div>
        {heroes.map(heroe =>
            <div className="heroe-preview" key={heroe.id}>
              <h2>{heroe.heroName}</h2>
              <img src={heroe.pic} alt="Heroe" />
              <p>Superpowers :{heroe.powers}</p>
              <p>Biography :{heroe.bio}</p>
              <Link to={`heroes/${heroe.id}`}>
              <button>Read more</button>
              </Link>              
            </div>
            )}
        </div>
     );
}
 
export default HeroeList;

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

import { useParams } from "react-router-dom";

const HeroDetail = (props) => {
    const heroes = props.heroes; 
   

    const { id } = useParams();
    return ( 
        <div>
            <h2>{heroes.id}</h2>
            <p>{heroes.heroName}</p>
            <p>{heroes.powers}</p>
            <p>{heroes.bio}</p>
        </div>
     );
}
 
export default HeroDetail;

Answer 1

路由路径和链接不一样：

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

当链接是

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

所以要么将路由路径更改为/heroes/:id 要么更新链接到 /HeroDetail/${heroe.id}

Answer 2

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

import { useState } from 'react'; import { useParams } from "react-router-dom";

const GetItems = ({heroes}) => { const { id } = useParams(); 返回（ {heroes.filter(superHero => superHero.id == id).map(newSuperArray =>(

{newSuperArray.heroName}

{newSuperArray.powers}

{newSuperArray.bio}

))} ); }

导出默认的GetItems；

使用 React 显示对象详细信息

2 个答案:

{newSuperArray.heroName}