Данные запроса, не обновляется экран sh

Question

Здесь у меня есть компонент, который показывает пользователей (сейчас их не так много). Пользователи запрашиваются из firebase. Я получу список пользователей и приведу их в состояние. Я ожидаю, что тогда компонент действительно отрендерится. Но это не так. Что я делаю не так?

Я выполняю запрос, инициированный конструктором.

1. Как заставить компонент отображать результат от getUserList ()

2. Возможно, в продуктивном сценарии мой getUserList () будет работать слишком долго. Есть ли более подходящий способ сделать такие вещи?

   export default class Userlist extends React.Component {
   
   
   constructor(props) {
    super(props);
   
    this.fbUser = new FBUser();
    this.state = {
      lastRefresh: 'alt',
      userlist: [],
    }
   
    // for some reason the users will not render, if called here
    this.getUserList();
   }
   
   
   refresh() {
    this.setState({
      lastRefresh: Date(Date.now()).toString()
    });
   }
   
   getUserList() {
    var otherusers = [];
    var user = firebase.auth().currentUser;
    var usersRef = firebase.database().ref('users');
    var currentUserEmail = user.email;
   
    usersRef.on("value", snapshot => {
      snapshot.forEach(childSnapshot => {
        if (childSnapshot.val().email != currentUserEmail) {
          console.log('childsnapshot: ' + childSnapshot.val().name)
          otherusers.push(childSnapshot.val());
        }
      });
    });
    this.setState({
      userlist: otherusers
    });
    this.refresh();
    //console.log('Userlist.getUserlist finished1: ' +  otherusers[0].name);
    //console.log('Userlist.getUserlist finished2: ' +  this.state.userlist[0].name);
   
   }
   
   handleTouchUser = (item) => {
    //alert('handleTouchItem '+item.email);
    var user1 = this.fbUser.getCurrentUser();
    var user2 = item.email;
    var gameM = new GameM(user1, user2);
   
    this.props.navigation.navigate('GameplayScreen', {
      itemId: '90'
    });
    //this.props.navigation.navigate({ routeName: 'GameplayScreen', params: { itemId: '90' } });
   }
   
   
   render() {
    console.log('count other users: ' + this.state.userlist.length);
   
    return ( <
      View >
      <
      Text > Other Users: lf: {
        this.state.lastRefresh
      } < /Text> <
      FlatList data = {
        this.state.userlist
      }
      renderItem = {
        ({
          item,
          index,
          separators
        }) => ( <
          ListItem key = {
            item.email
          }
          roundAvatar title = {
            item.name
          }
          subtitle = {
            null
          }
          leftAvatar = {
            {
              source: {
                uri: item.avatar_url
              }
            }
          }
          chevron = {
            {
              color: 'black'
            }
          }
          bottomDivider onPress = {
            () => this.handleTouchUser(item)
          }
          />
        )
      }
      keyExtractor = {
        item => item.email
      }
      /> <
      /View>
    )
   }
   }