création d'une application en React-Native qui rencontre ce problème. en gros, je devrais créer une page qui imprime les données de l'utilisateur actuellement connecté à la base de données (firebase). J'ai réussi à créer une sorte de classement qui imprime tous les utilisateurs avec des données, sur une autre page, mais je n'arrive pas à comprendre où je me suis trompé. quelqu'un peut-il m'aider?
https://snack.expo.io/@ khal_d / proj-p-3
import React, { Component } from 'react'; import { View, TouchableOpacity, StyleSheet, Button, Text, ScrollView, ListItem } from 'react-native'; import { Input, Card} from 'react-native-elements'; import * as firebase from 'firebase'; export default class User extends Component { static navigationOptions = { title: 'UserInfo', }; state = { data: [], }; // Controllare qui componentDidMount(){ //leggere array dal db const currentUID = firebase.auth().currentUser.uid; const path ="/users/" + currentUID; const users = firebase.database().ref(path); users.on("value", snap => { console.log("log di snap" + snap); //ciclo var elenco = []; snap.forEach(child => { elenco.push({ name: child.val().name, surname: child.val().surname, email: child.val().email, image: child.val().image, }) }); console.log("altro log finale" + elenco); this.setState({data:elenco}) }); } // controllare fino a qua render() { return ( <ScrollView> <View> <Card> //fix evertything all'interno di card { this.state.data.map((l, i) => ( <ListItem key={i} leftAvatar={{ source: { uri: l.image } }} title={l.name} subtitle={l.surname} /> )) } </Card> </View> </ScrollView> ); } }
3 Réponses :
Supprimez simplement les commentaires et {
}
supplémentaires de votre code dans render () ou utilisez-les comme ci-dessous. Dans JSX, vous ne pouvez pas avoir //
dans render ():
render() { return ( <ScrollView> <View> <Card> { this.state.data && this.state.data.map((l, i) => ( <ListItem key={i} leftAvatar={{ source: { uri: l.image } }} title={l.name} subtitle={l.surname} /> )) } </Card> </View> </ScrollView> ); } }
iOS n'a aucun problème avec les syntaxes supplémentaires dans render ()
, mais dans Android, il montrera cette erreur.
Aussi à cause d'un problème asynchrone de setState
, vous aurez une erreur de undefined n'est pas un objet
. Il est donc préférable d'avoir la condition {this.state.data &&
sur votre ListItem. J'espère pouvoir vous aider :)
ListItem
doit être importé depuis react-native-elements
et non depuis react-native
.
Je pense que le problème vient du commentaire. Dans JSX, le commentaire avec // ne fonctionne pas. Il sera traité comme un texte.
Vous devez modifier vos commentaires comme ci-dessous, ce qui résoudra votre problème
{/* fix evertything all'interno di card */}