在反应本机应用程序中从firebase检索数据答案

【问题标题】：Retrieve data from firebase in react native app在反应本机应用程序中从firebase检索数据
【发布时间】：2020-04-16 15:47:35
【问题描述】：

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

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>
        )
    }
}

【问题讨论】：

看起来您没有正确发布您的代码。请检查并正确上传您的代码。
三件事：当你可以截图时，永远不要用相机拍照，永远不要截图代码，当你可以简单地将代码粘贴为时，永远不要在链接后面发布代码文本。这同样适用于数据和控制台输出以及其他所有类似代码的内容。
这是我的代码，它适用于警报和控制台，但不适用于渲染

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

【解决方案1】：

数据是从 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 });
});

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

【讨论】：