Essayer de rendre le composant de pied de page à l'aide de la mise en ligne Si, €, pour éviter de transmettre des données non définies de Firebase, il passe en quelque sorte ces accessoires et le composant de pied de page hurlant sur des accessoires non définis.
this.state = {
location: {},
hours: {}
};
componentDidMount() {
db.collection('location').get().then(snapshot => {
snapshot.docs.forEach(doc => {
this.setState({
location: { ...doc.data()
}
})
})
});
db.collection('hours').get().then(snapshot => {
snapshot.docs.forEach(doc => {
this.setState({
hours: { ...doc.data()
}
})
})
});
}
render({
{
(this.state.hours) ? < Footer hours = {
this.state.hours
}
location = {
this.state.location
}
/> : null }
})
4 Réponses :
On dirait que vous initialisez cela.State.hours à l'objet vide {}
Un objet vide évaluera à vrai dans JavaScript P>
this.state={
location: {},
hours: false
};
La manière dont votre code est maintenant, Vous avez besoin d'un état de booléen séparé dans l'état vous permettant de savoir si this.state.hours.hours ne sera jamais faussement. Un objet vide est la vérité.
Voir toutes les valeurs de mensonges dans JavaScript pour plus de détails.
heures a été chargé ou que vous devez rechercher quelque chose de plus spécifique dans Ceci.State.hourses . Une autre option serait d'initialiser this.state.hours.hours à false .
Vous pouvez simplement modifier le code rendu pour vérifier si l'objet de localisation a la clé. comme ceci
Vous ne devriez pas vérifier l'état comme celui-ci (this.state.hours)? Il sera faux quand this.state.hours est 0 ou '' , mais ce sera vrai lorsque this.state.hours est {} .
Essayez d'utiliser null à la place, avec condition == null (pour vérifier si null ou non défini ) ou === null Pour vérifier si null :