C'est probablement une solution facile mais je ne peux pas voir la solution. Mon projet sur lequel j'ai pris beaucoup trop de temps commence enfin à se fermer, mais je suis vers la toute fin et j'ai des problèmes avec l'API avec laquelle je travaille.
Je m'attends à ce que chaque fois que j'utilise ma correspondance dans HeroDetail, je puisse utiliser cet identifiant pour localiser les données du héros que je veux afficher chaque fois que vous cliquez dessus. Mes autres composants fonctionnent exactement comme je pense qu'ils devraient. Ils me dirigent vers ma page HeroDetail avec un identifiant spécifique à un héros sur lequel je clique.
Le problème que j'ai, c'est qu'avec cette API, je ne sais pas comment utiliser cet identifiant pour extraire les heroStats de cet identifiant spécifique.
J'ai pensé que je pourrais peut-être ajouter quelques paramètres à la fin de l'url, comme ? _id = $ {} , mais cela n'a pas abouti. L'URL de l'API est https://docs.opendota.com/#section/Introduction si vous voulez aussi en lire un peu plus. Je n'ai rien trouvé qui puisse m'aider.
import React, {useState, useEffect} from "react";
import "./App.css";
function HeroDetail({match}) {
useEffect(() => {
fetchHero();
console.log(match)
},[]);
const [item, setItem] = useState([]);
const fetchHero = async () => {
const fetchHero = await fetch(`https://api.opendota.com/api/heroStats}`);
const item = await fetchHero.json();
setItem(item);
console.log(item)
};
return(
<div>
<h1>{item.id} </h1>
</div>
);
}
export default HeroDetail;
3 Réponses :
Opendota ne fournit pas d'API pour récupérer HeroStat par identifiant. Mais vous ne pouvez récupérer les HeroStats qu'une seule fois. Stockez-les dans votre boutique (si vous utilisez Redux). Utilisez le filtre de find pour obtenir le heroStat exact avec votre identifiant. En outre, vous pouvez utiliser reselect pour créer des sélecteurs mémorisés.
En tant que document API, nous pouvons voir qu'il donnera un tableau d'objets.
[ { "id": 0, "nom": "chaîne", "nom_localisé": "chaîne", "img": "chaîne", "icon": "string", "pro_win": 0, "pro_pick": 0, "hero_id": 0, "pro_ban": 0, "1_pick": 0, "1_win": 0, "2_pick": 0, "2_win": 0, "3_pick": 0, "3_win": 0, "4_pick": 0, "4_win": 0, "5_pick": 0, "5_win": 0, "6_pick": 0, "6_win": 0, "7_pick": 0, "7_win": 0 } ]
Donc, si vous souhaitez accéder à l'identifiant, dans votre cas, item [0] .id fonctionnera, ou vous pouvez utiliser find
const found = item.find (element => element.id == 'quel que soit l'id');
console.log (trouvé);
J'ai créé un petit CodeSandBox qui a un exemple fonctionnel de ce dont je parlais dans les commentaires de l'OP.
https://codesandbox.io/s/silent -leftpad-cbjb3? fontsize = 14 & hidenavigation = 1 & theme = dark
const heroId = match.params.id; const hero = item.find (element => element.id === heroId); console.log (hero); me donne toujours undefined
match.params.id est-il indéfini?
Non, j'ai un autre composant qui mappe tous les héros et la clé est leur identifiant, une fois que je clique sur le héros que je veux choisir, il ajoute cet identifiant à l'url et c'est ce que retourne match.params.id. Donc, dans ce cas, j'ai sélectionné Bloodseeker et 4 a été retourné
github.com/kevin6767/api_search Si vous souhaitez tout vérifier
Il n'y a pas de package.json?
Je viens de l'ajouter de ma faute
Sans rapport, mais étant donné que vous récupérez déjà cette route d'API dans le composant parent, vous pouvez aussi bien transmettre les données au lieu de les récupérer
Ah, solution simple, heroId doit être de type Number const hero = item.find (element => element.id === Number (heroId)) ;
N'oubliez pas non plus de mettre à jour hero / setItem après .find le héros
continuons cette discussion dans le chat .
Pouvez-vous essayer
const hero = item.find (h => h.id === / * l'id du héros que vous voulez * /)const hero = item.find (h => h.id === match.params.id) me donne undefined
Y a-t-il un héros avec l'id
match.params.iddans les données que vous obtenez defetch ()?Non, j'ai une liste et elle est créée dynamiquement. Disons que je sélectionne le 4 héros, puis mon URL sera
http: // localhost: 3000 / select / 4et j'essaye d'utiliser ce 4 pour trouver le héros dans heroStats, en utilisant l'APISi vous avez copié-collé l'extrait de code ci-dessus à partir de votre code de production, il peut être intéressant de noter qu'il y a un «}» à la fin de votre URL de récupération.
@Nitin qui a été corrigé désolé
L'approche de Tim devrait vous donner le bon héros. Pouvez-vous confirmer que le type de
match.params.idest bien un nombre et non une chaîne?Salut @ 4156, j'ai ajouté un lien vers une boîte de code dans une réponse avec un exemple fonctionnel pour vous :)