J'essaie d'afficher l'icône de loader lorsque les données sont chargées de données. Mais pour une raison quelconque, je ne suis pas capable d'afficher cette icône de chargeur lorsque j'essaie de récupérer des données d'API.
J'ai une structure de dossier comme ceci:
J'ai le code suivant dans mes cartes.js
4 Réponses :
Vous ne définissez pas chargement code> à vrai code> n'importe où. Essayez de régler le chargement sur true au début de la méthode LoadData () CODE>: loadData() {
this.setState({loading: true});
const path = `${url}/jira_jobs.php`;
axios.get(path)
.then(res => {
this.setState({
posts: res['data'],
loading: false
});
})
.catch(err => {
console.error(err);
});
}
Vous ne configurez pas votre propriété de chargement sur true n'importe où.
Vous devez la définir sur true au début de votre fonction LoadData comme ceci: également dans votre méthode de rendu, faites ceci: p> render() {
if(this.state.loading) {
return <img data-src={ require('../images/loader.gif') } />;
} else {
let records = this.fetchResult();
console.log(records);
return (
<div className='row'>
{ records }
</div>
)
}
}
Quand je l'ai défini sur True, je reçois une carte d'erreur (...): Rien n'a été retourné de rendu. Cela signifie généralement qu'une déclaration de retour est manquante. Ou, pour ne rien rendre, retournez null.
AVERTISSEMENT DE CONSOLE: Impossible d'effectuer une mise à jour de l'état réactif sur un composant non monté. Ceci est un non-op, mais cela indique une fuite de mémoire dans votre application. Pour résoudre, annulez tous les abonnements et tâches asynchrones dans la méthode du composantWillunMount.
J'ai fait une édition sur la réponse en prenant un autre coup d'oeil.
@ user1687891 Parce que pour le cas véridique, vous ne retournez pas l'image du chargeur.
Je pense que vous devriez remplacer l'attribut Data-Src avec SRC dans votre étiquette IMG
Définissez le chargement sur FALSE enfin Block, en raison de l'erreur, vous aurez une filante infinie visible.
Vous ne définissez pas le chargement sur avec l'opérateur ternaire aussi la source d'image doit également être true intérieur loaddata et vous ne retournez pas le chargeur de rendu, n'oubliez pas de définir chargement < / code> à false lorsque l'erreur se produit. ? Vous pouvez inclure votre chargeur dans une syntaxe beaucoup plus agréable puis si sinon src et non data-src
Essayez de ce code
loadData() {
const {loading,posts}this.state
this.setState({!loading});
const path = `${url}/jira_jobs.php`;
axios.get(path)
.then(res => {
this.setState({
posts: res['data'],
!loading
});
})
.catch(err => {
console.error(err);
});
}