无法从 React Native 中的 Firebase 实时数据库读取数据

Question

I am working on a simple React Native app to read and write data from a Firebase database. My read and write permissions in Firebase have been set to true:

{
  "rules": {
    ".read": true,  
    ".write": true,  
  }
}

Here are my relevant files:

App.js

import React from 'react'
import {View, StyleSheet, Button} from 'react-native'
import * as firebase from 'firebase'
import RootStackNavigator from './navigation/RootNavigation'

export default class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      isLoadingComplete: false
    }
    var firebaseConfig = {
      apiKey: "xxxxxxx",
      authDomain: "testproject-9d0bc.firebaseapp.com",
      databaseURL: "https://testproject-9d0bc-default-rtdb.firebaseio.com",
      projectId: "testproject-9d0bc",
      storageBucket: "testproject-9d0bc.appspot.com",
      messagingSenderId: "1003049293166",
      appId: "1:1003049293166:web:1df37fd6d181cf895cdd7f"
    };

    if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)
    } else {
      firebase.app()
    }
   }

  render() {
    return (
    <View style={styles.container}>
      <RootStackNavigator/>
    </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

RootStackNavigation.js

import React from 'react';
import { createAppContainer, StackNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../src/screens/HomeScreen';

const RootStackNavigator =  createStackNavigator(
  {
      screen: HomeScreen
  },
  {
    initialRouteName:"screen", // first component that should be displayed
    defaultNavigationOptions: {
      title: "App" 
    }
  }
);

export default createAppContainer(RootStackNavigator)

HomeScreen.js

import React from "react";
import { Text, StyleSheet, View, Button, TouchableOpacity } from "react-native";
import * as firebase from "firebase";
const HomeScreen = (
  props
) => {
  function getData() {
    firebase
      .database()
      .ref("people/")
      .on("value", (snapshot) => {
        const age = snapshot.val().age;
        console.log("Age: " + age);
      });
  }

  return (
    <View>
      <Text>Hello this is the home screen</Text>
      <Button title="Get Data" onPress={getData} />
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 30,
  },
});

export default HomeScreen;

My firebase database looks like this (all data was manually added through the firebase website)and I want to be able to print out these items after pressing the "Get Data" button to the console as shown in my getData function in HomeScreen.js

However, my code in getData does not work and nothing prints out to my console. What am I missing here?

Answer 1

Kindly modify this in your code

firebase.database.ref("people").on("value", snapshots => {
    let peoples = [];
    snapshots.forEach((snapshot) => {
   peoples.push(snapshot.val().age);
    console.log(snapshot.val().age);
    });
   // here you can set this Array
  // setPeople(peoples) 

Answer 2

Figured out my issue. As you can see in my firebase database, the way I was accessing my data was wrong. If I wanted to get the age of "dad", I should have called snapshot.val().dad .