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

【问题标题】：Unable to read data from Firebase Realtime Database in React Native无法从 React Native 中的 Firebase 实时数据库读取数据
【发布时间】：2021-02-27 01:23:15
【问题描述】：

我正在开发一个简单的 React Native 应用程序来读取和写入 Firebase 数据库中的数据。我在 Firebase 中的读写权限已设置为 true：

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

这是我的相关文件：

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;

我的 firebase 数据库看起来像这样（所有数据都是通过 firebase 网站手动添加的），我希望能够在将“获取数据”按钮按到控制台后打印出这些项目，如我的getData 函数所示在HomeScreen.js

但是，我在getData 中的代码不起作用，并且没有任何内容打印到我的控制台。我在这里错过了什么？

【问题讨论】：

标签： javascript reactjs firebase react-native firebase-realtime-database

【解决方案1】：

请在您的代码中修改此内容

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)

【讨论】：

嗨穆库拉姆！我在上面发布了正确答案。感谢您的帮助！

【解决方案2】：

解决了我的问题。正如您在我的 firebase 数据库中看到的那样，我访问数据的方式是错误的。如果我想得到“爸爸”的年龄，我应该打电话给snapshot.val().dad。

【讨论】：