Получать данные из firebase в реагировать

Question

Я подключился реагировать на родную с firebase, и я могу создать элемент в базе данных и получить его в журнале консоли, но не на экране. Я думаю, что есть некоторая задержка от запуска функции и выполнения всего.

В этот момент я создал функцию, которая читает элемент в базе данных, и он срабатывает только когда я нажимаю кнопку. В журнале консоли я получаю правильные данные, но не могу сохранить их в переменной и показать их на экране, когда я пытаюсь сделать это с помощью этой функции, экран остается пустым.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, Button, ScrollView} from 'react-native';
import firebase from 'react-native-firebase';

 let username;
class locationScreen extends Component {

  onTestClick = ()=>{
   const dbRef = firebase.database().ref("testdata")
    dbRef.set("hello worlf from app")
  }

  readUserData =() => {
    console.log('test oke');
    firebase.database().ref('/Users/1').on('value', function (snapshot) {
        test = snapshot.val();
        this.username = test.Gebruikersnaam;
        console.log(this.username);
    });
}

  render() {
      return (
        <ScrollView>

        <View style={styles.container}>
          <View>
            <Text style={styles.welcome}>{this.username}</Text>
            <Button title={"Create test record"} onPress={this.readUserData}></Button>
          </View>
        </View>
      </ScrollView>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      marginTop: 300,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 15,
    },
    button: {

    }
  });

  export default locationScreen;

Что мне следуетДостигнуть - это когда я попадаю на этот экран «locationScreen», данные из базы данных загружаются и отображаются на экране без нажатия какой-либо кнопки. Я думаю, что это очень простой вопрос, но я могу это исправить. В настоящее время я использую response-native 0.59.2 и Reaction-native-firebase 5.5.6

Answer 1

Что вам нужно сделать, это использовать состояние компонентов и сохранить там свое значение, чтобы вы могли отобразить его после получения от Firebase, следуйте инструкциям:

class locationScreen extends Component {
state = {
       username: ""
};

//... rest of your code

Выше вы инициализировали состояние с пустым именем пользователяСтроковое значение. Измените функцию readUserData, чтобы она отражала следующее:

readUserData =() => {
    console.log('test oke');
    firebase.database().ref('/Users/1').on('value', function (snapshot) {
        test = snapshot.val();
        this.setState({ username: test });
        console.log(this.state.username);
    });

Выше просто взяли данные и с помощью функции setState () переназначили значение имени пользователя состояния, чтобы отразить значение из полученных данных. Наконец, при рендеринге измените следующее:

<Text style={styles.welcome}>{this.state.username}</Text>

Это отобразит значение состояния имени пользователя, после того, как вы запустите функцию и получите данные, состояние изменится и отобразится здесь.

Надеюсь, это поможет!