J'essaye d'apprendre le JS en ce moment. Et j'ai commencé à faire un petit projet d'apprentissage et d'exemple.
J'ai un problème en ce moment. J'étudie sur le système de route de réaction. Je dois donc envoyer une valeur unique pour créer un chemin unique pour mes pokemons (j'utilise pokeAPI ) mais cette API le fait pas donner une valeur unique pour les pokemons donne juste des noms et des URL. A a 20 pokémons sur ma page de liste Pokémon.
Maintenant, j'ai besoin d'un identifiant unique pour envoyer PokemonShowComponent . Comment puis-je trouver un identifiant unique à cet effet?
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);
};
Je veux un nombre de paramètres id comme une méthode forEach et renvoie 1 à 20 à chaque étape. Comme un i ++ .
C'est possible?
REMARQUE: la variable Pokemon vient de cette ligne de code.
return (
<div>
<h1> Pokemon pages </h1>
<div>
{pokemons.map((pokemon, id) => (
<h3 key={id}>
<Link to={"/pokemon/${id}"}> {pokemon.name} </Link>
</h3>
))}
</div>
</div>
);
3 Réponses :
Vous avez déjà un identifiant unique dans votre carte, c'est le deuxième paramètre:
{pokemons.map((pokemon, id) => (
id renverra une valeur qui commence à 0 et s'incrémente automatiquement
J'ai résolu le problème. J'oublie le `cette marque :) Mais j'ai une autre question pour vous. Puis-je ajouter un autre paramètre après pokemon , id . Ont peut utiliser ceux utiles
Non, la carte prend 2 paramètres: élément et index
Pourquoi aurait besoin d'un autre paramètre pour?
Juste une seconde, j'ai pensé à quelque chose mais maintenant je me rends compte que c'est juste une chose factice. Désolé de te déranger.
Définissez un décompte initial dans votre état.
Vous pouvez vous y fier pour limiter le nombre de cartes à afficher ou pour quoi que ce soit. Utilisez votre état à votre disposition, aucune raison de vous compliquer la vie.
Il existe cependant plusieurs façons de procéder. même basé sur le CSS.
{pokemons.map((pokemon, id) => (
<h3 key={id}>
<Link to={"/pokemon/${id}"}> {pokemon.name} </Link>
</h3>
))}
your second parametr id should workBut I think you will need to do {`/pokemon/${id}`} instead of quotes
Avec le code que vous avez écrit, rencontrez-vous des problèmes?