Как добавить кнопку «показать больше» на каждую карточку?

Question

[JekaHC]

Есть компоненты:

Main.jsx

import { useState, useEffect } from "react";

import { Preloader } from "../Preloader";
import { Pokemons } from "../Pokemons";
import { LoadMore } from "../LoadMore";

function Main() {
  const [pokemons, setPokemons] = useState([]);
  const [loading, setLoading] = useState(true);
  const [pokemonsPerPage] = useState(20);
  const [page, setPage] = useState(1);

  function getPokemons(pokemonOffset) {
    fetch(
      `https://pokeapi.co/api/v2/pokemon?limit=${pokemonsPerPage}&offset=${pokemonOffset}`
    )
      .then((responce) => responce.json())
      .then((data) => {
        data.results && setPokemons((p) => [...p, ...data.results]);
        setLoading(false);
      });
  }

  useEffect(() => {
    const offset = page * pokemonsPerPage - pokemonsPerPage;

    getPokemons(offset);
  }, [page]);

  return (
    <main className="container content">
      {loading ? <Preloader /> : <Pokemons pokemons={pokemons} />}
      <LoadMore next={() => setPage((p) => p + 1)} />
    </main>
  );
}

export { Main };

Pokemon.jsx

import React from "react";
import { useState, useEffect } from "react";
import { TailSpin } from "react-loader-spinner";

function Pokemon({ name, url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((r) => r.json())
      .then(setData);
  }, [url]);

  return (
    <div>
      {data ? (
        <div className="card animate__animated animate__bounceInUp">
          <div className="card-image">
            <img src={data.sprites.front_default} />
            <span className="card-title">{name}</span>
            {/* {???.map((item, index) => (
              <div key={index}>
                <button onClick={()=> {??? }}>Sakra</button>
              </div>
            ))} */}
          </div>
          <div className="card-content">
            {data.abilities.map((n, index) => (
              <p key={index}>{n.ability.name}</p>
            ))}
          </div>
        </div>
      ) : (
        <div>
          <TailSpin type="Puff" color="purple" height={100} width={100} />
        </div>
      )}
    </div>
  );
}

export { Pokemon };

Нужно, чтобы у каждой карты (покемона) была кнопка "Подробности", которая при нажатии отображает дополнительную (уникальную) информацию из запроса fetch в "url" для выбранной карты.

Я думаю, что мне нужно сделать это в Pokemon.jsx, ибо в Main.jsx существующий fetch запрос не подходит.

Comments

[Никита Кит]

1) offset высчитывайте через useRef() чтоб не создавать лишнего ре-рендера (каждый вызванный сеттер вызывает ре-рендер)
2) Непонятно что в pokemons.jsx и как вы там рендерите список, прокидываете пропы
3) useEffect - это не по кнопке. А по монтированию и обновлению зависимостей. Фетчить нужно в колбэке, прокидываемом в кнопку

[Никита Кит]

кстати ещё момент на заметку. Чтоб не колотить промисы, можно в колбэк useEffect закинуть самовызывающуюся асинхронную функцию.

useEffect(() => {
  (async () => {
    const r = await fetch(url)
    ну и дальше как обычно
  })()
  }, [url]);

[JekaHC]

Никита Кит, вот компонент Pokemons.jsx

import { Pokemon } from "./Pokemon";

function Pokemons(props) {
  const { pokemons = [] } = props;

  if (!pokemons.length) {
    return <h4 className="pokemons_error">Nothing found</h4>;
  }

  return (
    <div className="pokemons">
      {pokemons.map((pokemon, id) => (
        <Pokemon key={id} {...pokemon} />
      ))}
    </div>
  );
}

export { Pokemons };

[JekaHC]

Никита Кит, за подсказки большое спасибо,уже исправляю, но касательно решения для кнопок это не касается на сколько я понял?

[Никита Кит]

JekaHC, идём дальше

{pokemons.map((pokemon, id) => (
        <Pokemon key={id} {...pokemon} />
      ))}

В качестве key вы на самом деле пробрасываете индекс, а не идентификатор. Пробросьте уникальное поле из покемона. Можете тот же имя если оно уникалько или урл, но никогда не кидайте индекс в качестве ключа. По каждому чиху весь массив будет ремаунтиться вместо апдейта.

И я так и не понял что должно происходить по кнопке "показать больше"? Вы фетчите прямо во время маунта элементов массива. У вас запрос отлетает сразу же после рендера каждого элемента. Это как-то ну не очень адекватно. Этот фетч по кнопке должен происходить в карточке?

[Никита Кит]

const handleMore = async () => {
    const r = await fetch(url)
    const newData = await r.json()
    setData(newData)
  }

  return (
    <div>
      {data ? (
         // тут бы на самом деле pokemonDetails компонент сделать и рендерить отдельный компонент для данных
      ) : (
        <div>
          <TailSpin type="Puff" color="purple" height={100} width={100} />
        </div>
      )}
    <button onClick={handleMore}>показать подробнее</button>
    </div>
  );

[JekaHC]

Никита Кит, задача кнопки - вывести доп. данные с запроса fetch(url) (Вес и рост покемона). Возможно можно сразу с основной информацией получать вес и рост, скрыть вес и рост стилями, а дальше после нажатия отображать это, но мне кажется React может предложить более оптимизированное решение ( хотя мой вариант со стилями я тоже понимаю только теоретически))

[Никита Кит]

JekaHC, по идее все данные для первичного рендера списка должны падать с запросом к списку.
А деталку покемона запрашивать стоит по кнопке, как я и указал выше.
Запрашивать каждый раз при скрытии/отображении данные - отстой. Конечно же данные после забора стоит оставить в памяти, просто не подавать на рендер. Для этого нужно ввести новый стейт const [show, setShow] = useState(false)
А в рендере подпилить условие {data && show ? (...
В handleMore чекнуть, если show === true то просто setShow(false)
Eсли show === false и data пуста - делаем запрос, после запроса делаем setShow(true).
Если же дата не пуста - просто делаем setShow(true)
Ну и рендер контента кнопки по show пилим ...>{show ? скрыть : показать}

[JekaHC]

Никита Кит, это всё в Pokemon.jsx можно сделать? Не понял

А в рендере {data && show ? (...
Eсли show === false и data пуста - делаем запрос, после запроса делаем setShow(true).
Если же дата не пуста - просто делаем setShow(true)
Ну и рендер контента кнопки по show пилим ...>{show ? скрыть : показать}

, можно эту часть кодом, пожалуйста.

[Никита Кит]

JekaHC, хах, вот ещё, думаете я просто так описал всё обрывками и основными моментами?
Дорогу осилит лишь идущий. За вас я ничего делать, конечно же, не буду. Иначе какой смысл? Переделегируйте таск на freelance habr если осознаёте, что не справитесь

Answer 1

[Антон Шаманов]

Вам сюда https://freelance.habr.com