Donc, je travaille actuellement sur un PokeDex en utilisant le PokeapI disponible en ligne.
Le code du projet est la suivante: p>
import React, { Component } from "react";
import { PokemonList } from "../pokemon/PokemonList";
export default class Dashboard extends Component {
render() {
return (
<div>
<div className="row">
<div className="col">
<PokemonList />
</div>
</div>
</div>
);
}
}
4 Réponses :
Tout d'abord, les composants fonctionnels sont apatrides. Si vous avez besoin de maintenir des composants de classe d'utilisation de l'état ou des crochets. Vous ne pouvez pas utiliser l'état d'un composant dans un autre composant, vous avez deux options,
Pourriez-vous me donner un exemple de la façon dont je peux continuer à faire? comme créer une relation parent-chlid, ou quelle bibliothèque de gestion je pourrais utiliser
Dans votre cas, la composante PokemonList a la valeur de l'état, alors initiez Pokelist de la pokemonlist et transmettez la valeur de l'état comme des accessoires au pokelist. réactjs.org/docs/composition-vs-inhéritance.html
Vous pouvez transmettre la fonction de votre état et de votre installation de parent sur un composant enfant et vous pouvez accéder à ces variables comme des accessoires dans un composant enfant.
@Thuvarakan Comment pourrais-je faire ça? Ne comprend pas vraiment ce concept trop que je suis nouveau pour réagir
Veuillez vous reporter à cet exemple, les états sont passés à partir de SignupDialog à LoginInput à l'aide des accessoires. 1. Codepen.io/thuva4/pen/bgbqaby?editors=0010
import React , { Component } from "react";
import axios from "axios";
//make it as class based component
export default class PokemonList extends Component {
state = {
url: "https://pokeapi.co/api/v2/pokemon/",
pokemon: null
};
async componentDidMount() {
const res = await axios.get(this.state.url);
this.setState({ pokemon: res.data["results"] });
console.log(res);
}
render() {
//check your data here
console.log(this.state.pokemon)
{/*pass data to child*/}
return <div> <PokeList data = { this.state } /> </div>;
}
};
//export this component
export const PokeList = (props) => {
//check your data is coming or not
console.log(props.data)
//access your data from props
return (
<React.Fragment>
{props.data.pokemon ? (
<section className="poke-list">
{props.data.pokemon.map(pokemon => (
pokemon.name
))}
</section>
) : (
<h1>Loading Pokemon</h1>
)}
</React.Fragment>
);
};Cela renvoie l'erreur "Impossible de lire la propriété" Pokemon "de non défini".
J'espère que vous obtenez des accessoires dans Pokelist.Vérifiez vos données à l'aide de console.log (accessoires) dans Pokelist.Veuillez donner cette sortie
Où dans le code Pokelist, j'ajouterais la console.log?
Oui. do console.log (apps.data) dans Pokelist et vous allez porter pokemon
1min je vais changer dans ma réponse
Il dit "non défini" sur le journal de la console pour cette ligne de code.
S'il vous plaît vérifier que vous obtenez des données dans votre état avant de le transmettre à enfant.console.log (this.state.pokemon) dans votre méthode de rendu de pokemonlist
Rien n'est affiché sur la console, il est toujours confronté à cette erreur d'état.
Je vous recontacterai avec l'exemple.
ça fonctionne bien. Essayez ceci et vous obtiendrez des données dans votre console.
Il dit maintenant que "ne peut pas lire la propriété" pokemon "d'indéfinie. Mais toujours seulement" non défini "est renvoyé int IT Console Log.
J'ai essayé ce code. Cela donne-moi une sortie de console appropriée
J'ai copié et collé directement, ça ne me rend rien pour moi.
Vous obtenez vos données d'API dans votre console.log (RES)? .Il pourrait être un problème avec la demande AxIOS.
J'ai réalisé quelque chose de crucial, j'ai édité la question avec plus de détails
Vous avez besoin d'itérer votre pokeliste qui passait le résultat de votre composant de composant de la composante de votre enfant en tant que PROP, puis recevez votre accessoire dans le composant enfant Voici une codes de fonctionnement et une boîte de fonctionnement de vos noms Pokémon dans le composant enfant Pokelist
Il y a un peu de confusion entre votre pokemonlist et votre composant pokeliste. Je crois que ce que vous cherchez vraiment, c'est d'avoir seulement un de ceux-ci. Si vous mélangez les deux, vous pouvez avoir un composant qui contrôle la vue en fonction de l'état, dans votre cas, l'état est votre liste Pokemon.
J'ai mélangé les deux ici, donc votre méthode de rendu rend "Chargement de pokemon" jusqu'à Vous obtenez votre réponse à partir de Axios, puis lorsque la réponse est de retour, elle reçoit ces données, met à jour votre état et la mise à jour de l'état déclenchent une re-rendue. P>
P>
const url = "https://pokeapi.co/api/v2/pokemon/";
state = {
pokemon: null
};
componentDidMount() {
axios.get(url).then(res => {
this.setState({ pokemon: res.data["results"] });
});
}
Si la liste Pokemon n'a qu'une fonction logique, vous n'en avez pas besoin du tout ou que vous pouvez le convertir en contexte.