Le rendu de réagir composant après l'api de réponse
J'ai une réagir composant que je souhaite remplir avec des images à l'aide de l'api Dropbox. L'api partie fonctionne bien, mais le composant est rendu avant que les données proviennent de & si le tableau est vide. Comment puis-je retarder le rendu du composant jusqu'à ce qu'il a les données dont il a besoin?
var fileList = [];
var images = [];
var imageSource = [];
class Foo extends React.Component {
render(){
dbx.filesListFolder({path: ''})
.then(function(response) {
fileList=response.entries;
for(var i=0; i<fileList.length; i++){
imageSource.push(fileList[0].path_lower);
}
console.log(imageSource);
})
for(var a=0; a<imageSource.length; a++){
images.push(<img key={a} className='images'/>);
}
return (
<div className="folioWrapper">
{images}
</div>
);
}
}
Merci pour votre aide!
- Je voudrais monter uniquement le composant une fois que vous avez les images. Donc celui qui monte cet élément (le parent), doit extraire les images puis monter le composant.
- Vous ne devriez pas avoir à faire tout le travail à l'intérieur de votre
render
méthode. Où en êtes-vous de changer l'état? Le composant rend après la mise à jour de l'état.
Vous devez vous connecter pour publier un commentaire.
Changements:
1. Ne faites pas l'appel de l'api à l'intérieur de méthode de rendu, utiliser
componentDidMount
cycle de vie de la méthode.componentDidMount:
2. Définir le
imageSource
variable de l'état tableau de valeur initiale[]
, une fois que vous obtenez la réponse mise à jour à l'aide de setState, il sera automatiquement re-rendre le composant avec la mise à jour des données.3. Utiliser le tableau de l'état pour générer les composants de l'interface utilisateur dans la méthode render.
4. Pour tenir le rendu jusqu'à ce que vous n'avez pas à obtenir les données, mettre la condition à l'intérieur de
render
méthode de vérification de la longueur deimageSource
tableau si la longueur est égale à zéro alorsreturn null
.L'écrire comme ceci:
Vous devriez être en utilisant votre état du composant ou accessoires, de sorte qu'il sera de nouveau rendu lors de la mise à jour des données. L'appel à Dropbox devrait être fait en dehors de la
render
méthode, sinon vous allez être frappé dans l'API à chaque fois que le composant re-rend. Voici un exemple de ce que vous pourriez faire.Si il n'y a pas encore d'images, il va tout simplement rendre un vide
div
de cette façon.Tout d'abord, vous devriez être en utilisant la état du composant et ne pas l'utiliser à l'échelle mondiale des variables définies.
Donc, pour éviter de montrer le composant avec un tableau vide d'images, vous aurez besoin d'appliquer une condition de "chargement" de la classe sur le composant et le retirer lorsque la matrice n'est plus vide.