Как создать уникальное значение в функции карты? Его потребность в значении ключа - PullRequest
Новая
       24

Как создать уникальное значение в функции карты? Его потребность в значении ключа

1 голос
/ 21 апреля 2020

Я пытаюсь выучить JS прямо сейчас. И начал делать небольшой учебный и примерный проект.

У меня сейчас проблема. Я учусь на реактивной системе маршрутов. Поэтому я должен отправить уникальное значение, чтобы создать уникальный путь для моих покемонов (я использую pokeAPI ), но этот API не дает уникальное значение для покемонов, просто дает имена и URL-адреса. Я получил 20 покемонов на моей странице со списком покемонов.

Теперь мне нужен уникальный идентификатор для отправки PokemonShowComponent. Как я могу найти уникальный идентификатор для этой цели? 

    return (
    <div>
      <h1> Pokemon pages </h1>
      <div>
        {pokemons.map((pokemon, id) => (
          <h3 key={id}>
            <Link to={"/pokemon/${id}"}> {pokemon.name} </Link>
          </h3>
        ))}
      </div>
    </div>
  );

Я хочу подсчет параметров id, как метод forEach, и возвращаю 1-20 каждый шаг. Как i++.

Это может быть возможно?

ПРИМЕЧАНИЕ. Переменная Pokemon содержит следующие строки кода. 

const fetchPokemons = async () => {
    const data = await fetch("https://pokeapi.co/api/v2/pokemon/");

    const pokemons = await data.json();
    console.log(pokemons.results);
    setPokemons(pokemons.results);
  };

Ответы [ 3 ]

1 голос
/ 22 апреля 2020 
{pokemons.map((pokemon, id) => (
    <h3 key={id}>
        <Link to={"/pokemon/${id}"}> {pokemon.name} </Link>
       </h3>
   ))}

ваш второй параметр id должен работать

Но я думаю, вам нужно будет сделать {`/pokemon/${id}`} вместо кавычек

0 голосов
/ 22 апреля 2020

Установите начальный счет в вашем штате.

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

Есть несколько способов, которыми вы могли бы go об этом все же. даже css на основе.

0 голосов
/ 21 апреля 2020

У вас уже есть уникальный идентификатор на вашей карте, это второй параметр: 

{pokemons.map((pokemon, id) => (

id вернет значение, которое начинается с 0 и автоматически увеличивается

...