Как отобразить список объектов из Firebase в React Native?

Question

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

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

Вот файл: https://pastebin.com/RLJMpzWN

Вот настройка Firebase

У меня вопрос, как мне отобразить мой список объектов?

import React from "react";
import { StyleSheet, View, Text, FlatList } from "react-native";
import firebase from 'firebase/app';




export default class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      highScoreList: null,
      isDataLoaded: false
    }
  }


  componentDidMount() {
    const hList = [];
    const ref = firebase.database().ref('users')
    ref.orderByChild('hours').on('child_added', function(snapshot) {
      hList.push({
        id: snapshot.key,
        hours: snapshot.val().hours,
        name: snapshot.val().name
      });
    });

    this.setState({
      highScoreList: hList,
      isDataLoaded: true
    })



  }



  render(){
    if(this.state.isDataLoaded && this.state.highScoreList){

      return (
        <View style={styles.card}>
          {this.state.highScoreList.map( user => <Text key = {user.key} style = {{textAlign: 'center', marginBottom: 10}}>{user.name}        {user.hours}</Text>)}
        </View>
      )
    }else{
      console.log("State var tom")
      return (<Text> Waiting for data</Text>)
    }
  }

}




const styles = StyleSheet.create({
  card: {
    flex: 1, flexDirection: 'row',
    backgroundColor: "#fff",
    paddingVertical: 20,
    paddingHorizontal: 10,
    borderRadius: 20,
    minHeight: 333
  },
  text: {
    fontSize: 30,
    marginBottom: 20,
    color: "black",
  },
});

Answer 1

@ Simen96 Я бы порекомендовал вам рефакторинг вашего компонента примерно так:

  constructor(props) {
    super(props);
    this.state = {
      highScoreList: [],
      isDataLoaded: false
    }
  }

 componentDidMount() {
    const ref = firebase.database().ref('users')

    ref.orderByChild('hours').on('child_added', snapshot => {
      this.state.highScoreList.push({
        id: snapshot.key,
        hours: snapshot.val().hours,
        name: snapshot.val().name
      });
    });
  }

render(){
    if(this.state.highScoreList.length){

      return (
        <View style={styles.card}>
          {this.state.highScoreList.map( user => <Text key = {user.key} style = {{textAlign: 'center', marginBottom: 10}}>{user.name}        {user.hours}</Text>)}
        </View>
      )
    }else{
      console.log("State var tom")
      return (<Text> Waiting for data</Text>)
    }
  }

Функция componentDidMount и обратный вызов 'child_added' не будут выполняться последовательно, потому что обратный вызов 'child_added' является асинхронным и setState не будет ожидать запуска этого обратного вызова.