Блог

Я создаю приложение pokedex с помощью pokeapi. Похоже, я не могу понять, как я могу передать свои данные из списка покемонов на свою единственную страницу покемонов.

В основном я пытаюсь сделать следующее: когда я нажимаю на одного покемона из списка, я хочу, чтобы он отображал один компонент данных о покемонах и передавал данные щелкнутого покемона в этот компонент.

Я использую react-маршрутизатор-dom

Это мое app.js где я сопоставляю всех покемонов, хранящихся в штате, и возвращаю компонент списка покемонов с именем prop для каждого элемента в штате

Вот мой pokemonlist.js

Вот мой единственный компонент данных о покемонах, в который я хочу передать данные от щелкнутого покемона

Как бы я это сделал :

В вашем маршрутизаторе вам нужно иметь 2 маршрута (то есть 2 компонента) : 1, на котором отображаются все покемоны, и 1, на котором отображается один покемон,

Для одного маршрута покемонов вы можете использовать параметры react-router-dom, чтобы отображать только покемона, который указан в качестве идентификатора в URL (вам нужно использовать уникальное свойство для каждого покемона, например идентификатор).

Это было бы что-то вроде этого :

 function Router() {
  return (
    <Switch>
      <Route path="/pokemons" exact component={Pokemons} />
      <Route path="/pokemon/:id" exact component={Pokemon} />
    </Switch>
 

Все компоненты покемонов
(# пример : http://localhost:3000/pokemons (отображает всех покемонов)

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

function Pokemons() {
  useEffect(() => {
    getPokemons();
  }, []);

  return (
    <>
      {allPokemons.map(pokemon => (
        <Link to={`/pokemon/${pokemon.id}`}>{pokemon.name}</Link>
      ))}
    </>
 

Один компонент покемона
(# пример : http://localhost:3000/pokemon/150 (отображает покемона с идентификатором 150)

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

function Pokemon() {
  let { id } = useParams();

  useEffect(() => {
    getPokemon(id);
  }, []);

  return (
    <>
      {pokemon.name}
    </>