Je veux récupérer un tableau de mon dB à l'aide de Axios et l'afficher dans le composant React. J'ai utilisé la méthode de ComponentDidMount () de cytecycle avec async / attendre la syntaxe comme suit: L'instruction de retour du composant de la classe est la suivante: p> return (
<div className="wwd animated" data-animation="bounceInLeft">
<div className="wwd-slider">
<div className="container-fluid">
<div className="row">
<div className="col-md-12 nlrp">
<div className="owl-carousel owl-theme">
{
this.state.product.map( product =>
<div className="item">
<img src="images/p-01.png" className="img-fluid" />
<div className="wwd-over">
<a href="#">{product.product_name}</a>
<p>{product.info}</p>
</div>
</div>
)}
}
</div>
</div>
</div>
</div>
</div>
</div>
);
3 Réponses :
Vous devez soit utiliser
Lorsque vous utilisez Il y a Typo dans cet article.State.Produite S .MAP axios.get (...). Ensuite (...). Capture (...) attendre mot-clé, vous devez y penser comme une opération synchrone, vous n'avez donc pas besoin de rappel. this.setstate ({produits: résultat.data.product})
J'ai essayé cela aussi mais ça n'a pas fonctionné c'est pourquoi je pensais que des promesses travailleraient
Si vous pouvez obtenir des promesses de travailler, alors async / attendre devrait également fonctionner. Ils sont en fait deux façons différentes de travailler avec des promesses.
Oh ok le problème est avec le bloc de retour alors je suppose. J'ai également ajouté le bloc de retour du composant également, si vous pouviez s'il vous plaît jeter un coup d'œil et dites-moi si je manque quelque chose.
Donc, pour l'exemple que vous avez donné, attendez (et aussi l'affectation à res code>) est inutile si vous utilisez toujours .Chen code> et .Catch code>. Si vous vouliez utiliser attendre, plus la manière idiomatique serait comme ceci: <div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-1176px, 0px, 0px); transition: 0s; width: 4704px;">
<div class="owl-item cloned" style="width: 186px; margin-right: 10px;"><div class="item">
…
</div></div>
<div class="owl-item active" style="width: 186px; margin-right: 10px;"><div class="item">
…
</div></div>
<div class="owl-item cloned" style="width: 186px; margin-right: 10px;"><div class="item">
…
</div></div>
</div></div>
<div class="owl-nav">…</div>
</div>
J'ai également ajouté le bloc de retour du composant également, si vous pouviez s'il vous plaît jeter un coup d'œil et dites-moi si je manque quelque chose.
Tout ressemble au casher, autant que je puisse dire ... Vous obtiendrez un carrousel vide jusqu'à ce que vos articles se chargent, mais ils devraient se charger de la même manière que tout autre moyen ... De plus, vous n'avez pas de clé < / Code> Pour votre produit dans le carrousel, la réaction se plaindre donc, car elle ne sait pas quelle composante à réutiliser. Définissez la clé de votre .Item div sur un identifiant unique.
Pour diagnostiquer le problème, nous aurons probablement besoin de voir la page en action afin que nous puissions en examiner avec les outils de développeur de navigateur. C'est probablement un problème de CSS étrange.
Oh, non, ça pourrait être le carrousel de hibou ne joue pas bien avec réaction. C'est un plugin JQuery, donc cela pourrait avoir des problèmes avec réaction ...
dzone.com/articles/how-to-utilisateur- carousel-in-réactjs pourrait aider
Vous pouvez appeler la fonction dans ComponentDidMount, appelant l'API pour vous
componentDidMount() {
this.callAxiosApi();
}
So, in this function call the api through axios using async/await
if you get response then set the state, if not console the error simple is that
callAxiosApi = async () => {
try{
const res = await axios.get("http://santacruz.clickysoft.net/entercode hereapi/public/home-product");
if(res) this.setState({products: res.data.products})
}catch(err){
err => console.log(err)
}
}
Cette réponse sera meilleure si elle a une explication.
Salut emma, pouvez-vous le mettre sur codesandbox ou github où nous pouvons voir le code actuel?
Lorsque vous avez enregistré les résultats, avez-vous utilisé les mêmes données JSON et avez-vous défini l'état à l'aide de
ceci.setstate danscomposentDidMount ?Oui les mêmes données JSON, j'ai utilisé Postman pour exécuter l'API, puis collé le résultat de la matrice directement dans l'état de l'élément. Donc, je n'avais pas besoin d'un instate à ce moment-là
Ok, je pense que je comprends le problème maintenant. J'ai mis à jour ma réponse.
Et si vous aviez toujours utilisé
SetState , vous auriez pu remarquer le même problème :). Il aide à ne changer qu'une chose à la fois lors du débogage, mais j'aurais probablement fait la même chose: d.