时间戳

首页 > 解决方案 > 在反应本机应用程序中从firebase检索数据

javascript - 在反应本机应用程序中从firebase检索数据

问题描述

我是 React Native 的新手。我想将从应用程序屏幕上的 firebase 数据库获取的文本显示为文本。我试图在控制台和警报上打印，它显示成功，但没有在应用程序屏幕上显示。firebase 数据 控制台打印 警报框 

import React,{Component} from 'react';
import { View, Text,} from 'react-native';
import * as firebase from 'firebase';


export default class ListItem extends Component {


  state= {
      items: []
   }


    componentWillMount(){
        var firebaseConfig = {
          apiKey: "***",
          authDomain: "***",
          databaseURL: "***",
          projectId: "***",
          storageBucket: "***",
          messagingSenderId: "***",
          appId: "***",
          measurementId: "***"
        };


        firebase.initializeApp(firebaseConfig);

        var ref = firebase.database().ref('/14/info');

        ref.on("value", function(snapshot) {

        const userItem = snapshot.val();
        let items = Object.values(userItem);


        });
      }

render() {
        return (
            <View style= {{justifyContent: 'center'}}>

             <Text>{this.state.items}</Text> 
            </View>
        )
    }
}

标签： javascriptfirebasereact-nativefirebase-realtime-databasereact-native-android

解决方案

数据是从 Firebase（以及几乎所有现代 Web API）异步加载的，因为可能需要一些时间才能获得结果。这意味着当您的应用程序被渲染时，数据还不可用。出于这个原因，您需要告诉 React 在数据可用时重新渲染，您可以通过调用setState().

let self = this;
ref.on("value", function(snapshot) {
    const userItem = snapshot.val();
    let items = Object.values(userItem);
    self.setState({ items: items });
});

或者，您可以使用粗箭头表示法，使其更简单：

ref.on("value", (snapshot) => {
    const userItem = snapshot.val();
    let items = Object.values(userItem);
    this.setState({ items: items });
});

我强烈建议在继续之前阅读如何在 React 应用程序中管理状态，因为这种行为对于高效构建 React 应用程序非常重要。

推荐阅读