Lorsque je console enregistre séparément la variable "Pokemons", il renvoie un tableau. Mais quand j'essaie de la cartographier, je reçois une erreur: TypeError: pokemons.map n'est pas une fonction
My Code: p> et la carte est appelée Pokelist Composant: P> import React from "react";
const PokeList = ({ pokemons }) => {
console.log(pokemons.map((poki) => "Yellow"));
return (
<div>
<h1>Here are all your pokis: </h1>
</div>
);
};
export default PokeList;
3 Réponses :
J'ai changé mon code à ceci:
import React, { useState, useEffect } from "react";
import "./App.css";
import PokeList from "./components/PokeList";
import Paginator from "./components/Paginator";
import axios from "axios";
function App() {
let [pokemons, setPokemons] = useState([]);
let [status, setStatus] = useState(false);
useEffect(
() =>
axios.get("https://pokeapi.co/api/v2/pokemon").then((res) => {
/* setStatus(true);
console.log(status); */
setPokemons(res.data.results.map((poki) => poki.name));
}),
[]
);
return (
<div className="App">
<PokeList pokemons={pokemons} status={status}></PokeList>{" "}
<Paginator></Paginator>
</div>
);
}
export default App;
axios.get retourne un Promets , pas un tableau.
Parce que vous avez enveloppé l'objet code> Axios Promise Code> dans SetPokemans:
Essayez ci-dessous: p>
p>
Le code suivant renvoie un objet Promise, pas un tableau! P>
axios.get("https://pokeapi.co/api/v2/pokemon").then((res) => {
setPokemons(res.data.results.map((poki) => poki.name));
}) // returns object
La raison pour laquelle votre carte () code> a échoué est parce que Axios renvoyait la promesse pour les premiers appels. Donc, votre composant enfant tentait de cartographier une promesse, ce qui ne pouvait bien sûr pas faire. Une autre solution autour de cette question est de vérifier la longueur de la matrice et uniquement de la carte s'il y a une longueur. if(pokemons.length){
pokemons.map((poke) => {
console.log(poke)
})
}
Je ne pense pas que vous deviez emballer
setpokemons autour de votreaxios appelPouvez-vous ajouter une autre console.log avant la carte et les pokemons de sortie de la carte pour voir ce que vous avez?
Auparavant, il a enregistré une matrice normale comme il se doit, mais il enregistre maintenant ceci: [] et promis {}
Maintenant, j'ai enlevé des setocokemons extérieurs () et j'ai ajouté celui-ci à l'intérieur de l'appel Axios. Maintenant, la console Console se connecte ceci: (20) ["Bulbasaur", "Ivysaur", "Venusaur", "Charmander", "Charmelande", "Charmelard", "Squirtle", "Wartortle", "Blastoise", "CATERPIE", "METAPOD", "Butterfree", "Weedle", "Kakuna", "Beedrill", "Pidgey", "Pidgeotto", "Pidgeot", "Rattata", "Ratialate"]