Question

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

Answer 1

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

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应用程序至关重要。

在React Native应用中从Firebase检索数据

1 个答案: