web-dev-qa-db-fra.com

J'ai essayé d'obtenir un cadre pour l'index hors de portée NaN (base de données temps réel)

J'essaie de rendre quelques lignes de la base de données firebase, je reçois cette erreur:

TaskQueue: Erreur avec la tâche: Invariant Violation: Tentative d'obtenir le cadre pour indice NaN hors limites

  const { currentUser } = firebase.auth();
    var userfavorites = firebase.database().ref(`/users/${currentUser.uid}/favorites/`);
    userfavorites.once('value').then(snapshot => {
      this.setState({ userfav: snapshot.val() })
    })

...

  <FlatList
    data={this.state.userfav}
    renderItem={({ item }) => (
      <Text>{item.favdata}</Text>
    )}
  />

 DB Structure

reactjsfirebasereact-nativefirebase-realtime-database
5
blacksun

J'ai eu le même problème, il semble que ce problème est la raison des noms d'objet. Dans l'image ci-dessous, vous pouvez voir que dès que vous récupérez un instantané à partir du point de terminaison Firebase, il est livré avec l'id qui n'est pas reconnu par React Native. Et réagit comme si c'était vide obj.  firebase returned snapshot

Tout ce que vous avez à faire est de mapper les éléments de l'objet après l'avoir récupéré comme dans l'exemple ci-dessous,

        const fbObject = snap.val();
        const newArr = [];
        Object.keys(fbObject).map( (key,index)=>{
            console.log(key);
            console.log("||");
            console.log(index);
            newArr.Push(fbObject[key]);
        });
2
mert

Juste une légère modification de la réponse de @mert. L'opérateur map de JavaScript retourne un tableau. donc, il n’est pas nécessaire de Push éléments sur newArr. En outre, l'unique élément Firevase id sera manquant dans les éléments du nouveau tableau. Donc, il devrait être ajouté à l'élément de tableau.

const fbObject = snapshot.val(); const newArr = Object.keys(fbObject).map((key) => { fbObject[key].id = key; return fbObject[key]; });

Vous allez vous retrouver avec un newArray comme ceci:

[ { "id": "12345", "name": "Jane Doe", "age": 18 }, { "id": "23456", "name": "John Smith", "age": 27 } ]

0
Justin Noel