J'essaye de rendre mon composant Guild avec les données de Firestore. Je mets les données de Firestore dans mon état sous forme de tableau, puis lorsque j'appelle le composant et que j'essaye de le rendre, rien ne s'affiche. Je veux croire que je fais quelque chose de très mal ici (je n'ai pas travaillé avec React depuis très longtemps), mais je ne reçois aucune erreur ou avertissement, donc je ne suis pas sûr de ce qui se passe exactement.
guildInfo() {
Fire.firestore().collection('guilds')
.get().then(snapshot => {
snapshot.forEach(doc => {
this.setState({
guilds: [{
id: doc.id,
guildDesc: doc.data().guildDesc,
guildFaction: doc.data().guildFaction,
guildName: doc.data().guildName,
guildRegion: doc.data().guildRegion,
guildServer: doc.data().guildServer
}]
})
console.log(doc.data().guildName)
})
})
}
Fonction de rendu
renderCards() {
var guildComp = this.state.guilds.map(guild => {
console.log(guild)
return <Guilds
key={guild.id}
guildFaction={guild.guildFaction}
guildServer={guild.guildServer}
guildName={guild.guildName}
guildDesc={guild.guildDesc} />
})
return <CardDeck>{guildComp}</CardDeck>
}
Récupération des données Firestore <Col>
<Card>
<CardBody>
<CardTitle className={this.props.guildFaction}>{this.props.guildName}</CardTitle>
<CardSubtitle>{this.props.guildServer}</CardSubtitle>
<CardText>{this.props.guildDesc}</CardText>
</CardBody>
</Card>
</Col>
MISE À JOUR: résolu, le correctif est dans la fonction de rendu.
4 Réponses :
Eh bien, vous utilisez des "guildes" d'état mais vous mettez à jour des "posts" d'état ou je rate quelque chose?
ouais c'était une faute de frappe de ma part, j'ai corrigé ça mais ça ne marche toujours pas.
Je vois peu de choses ici:
Guild.js , mais vous effectuez le rendu posts , mais vous utilisez this.state.guilds pour afficher les composants doc.id au lieu de doc.data().id guildes au rendu. guilds est un tableau d'objets de guilde, vous devriez donc faire quelque chose comme guilds.map (guild => {return Voici quelques problèmes à corriger, puis essayez de console.log (this.state.guilds) avant le rendu et voyez si vous obtenez les bonnes données
# 1: Typo, c'est en fait Guilds.js dans le code source // # 2: Aussi une faute de frappe, corrigé ça, rien n'a changé. // # 3: J'ai 2 documents dans Firestore, ils sont tous deux stockés correctement lorsqu'ils sont appelés. // # 4: J'utilise doc.id au lieu de doc.data (). Id car l'id est l'id du document, pas un id stocké dans le document. // # 5: J'ai essayé de l'écrire comme guilds.map (guild => {return
Je pense que votre problème est que parce que setState est asynchrone, au moment où il définit réellement l'état, doc n'est plus défini. Essayez d'abord de créer le tableau, puis appelez setState en dehors de la boucle, c'est-à-dire:
guildInfo() {
Fire.firestore().collection('guilds')
.get().then(snapshot => {
let guilds = []
snapshot.forEach(doc => {
guilds.push({
id: doc.id,
guildDesc: doc.data().guildDesc,
guildFaction: doc.data().guildFaction,
guildName: doc.data().guildName,
guildRegion: doc.data().guildRegion,
guildServer: doc.data().guildServer
});
})
this.setState({guilds});
})
}
J'ai essayé de faire cette modification, rien n'a changé. Je reçois toujours les données et aucun composant ne rend. Je pense qu'il y a quelque chose qui ne va pas dans la fonction de rendu. Je commence à penser que return
Essayez d'utiliser une fonction de carte, et dans la fonction de rappel de setState, essayez de consigner votre état après la mise à jour:
guildInfo() {
Fire.firestore().collection('guilds')
.get()
.then(snapshot => {
const guilds = snapshot.map(doc => {
return {
id: doc.id,
guildDesc: doc.data().guildDesc,
guildFaction: doc.data().guildFaction,
guildName: doc.data().guildName,
guildRegion: doc.data().guildRegion,
guildServer: doc.data().guildServer
};
this.setState({guilds}, () => console.log(this.state))
})
})
})
}
Si dans le journal de la console il y a un peu [i ] près de votre état, cela signifie que l'état n'est pas prêt, et donc c'est un problème asynchrone. Le remplacement de forEach par la fonction map peut cependant déjà aider.
Pouvez-vous partager votre code pour récupérer les données de Fire Store et peut-être un journal de la console de la réponse?
@WilliamChou désolé j'ai écrit ce post rapidement, continuez à trouver des choses qui me manquent. c'est trop long pour poster ici apparemment donc je dois le poster dans un pastebin. MODIFIER: pastebin.com/Lw4XGNJ4
Le code atteint-il parfois l'intérieur du
puis? Si tel est le cas, y a-t-il des données dans l 'snapshot?console.log ()imprime-t-il quelque chose?@FrankvanPuffelen Oui, il imprime les 2 seules colonnes de la base de données. Je peux obtenir les données, je ne peux tout simplement pas obtenir le rendu du composant de guilde
Ah ok. Si l'appel à
setState ()se produit avec les bonnes données de la base de données, j'ai bien peur de ne pas être la meilleure personne pour vous aider.où appelez-vous votre fonction guildInfo ()? Vous devez vous assurer que les données sont renvoyées avant de pouvoir les utiliser, il peut s'agir d'un problème asynchrone
@gianni, il est appelé dans componentdidmount, je pensais que c'était un problème asynchrone mais il est appelé, je pense que je ne rend pas correctement les données.
ok, essayez de retourner null avant le contenu, si this.state.guilds n'est pas disponible: if (! guilds) {return null}
@gianni si vous regardez la fonction de rendu mise à jour dans mon message d'origine, le console.log renvoie 2 objets, qui sont les 2 documents de ma base de données qui ont été appelés et stockés localement. peut-être qu'il y a une faute de frappe quelque part? je pense que tout cela devrait fonctionner.
d'accord, j'écris une réponse pour un morceau de code que vous pouvez essayer ...