динамически реагировать на добавление данных в Picker

Question

Я использую встроенный сборщик реагирования.

Я хочу получить данные из firebase и динамически вставить их в средство выбора.

запрос из firebase является асинхронным, поэтому я хочу использовать его в мою пользу.

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

проблема в том, что getUsers Функция () возвращает сначала пустой массив, а через 2 секунды возвращает полные данные, которые я ожидал.

, но средство выбора уже отрисовано с пустым массивом.

как вставить данные в сборщик во время выполнения?

Я не хочу использовать «.then» или обещание, я хочу, чтобы сборщик добавлял элемент каждый раз, когда база отправляла его.

это код, который получает данные из базы огня

getUsers(){
          var items = []
          firebase.database().ref().child("Users").on('value',function(snapshot) {
            snapshot.forEach(function(childData) {

              items.push(<Picker.Item key ={childData.val().FullName} value={childData.val().FullName} label={childData.val().FullName} />)
            })
          }).
       return items
    }

и это код сборщика

render() {

      if (this.state.isLoading) {
        return (
          <View style={{flex: 1, paddingTop: 20}}>
            <ActivityIndicator />
          </View>
        );
      }

      return (
       <View style={styles.MainContainer}>

             <Picker
               selectedValue={this.state.PickerValueHolder}

               onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >
               {this.getUsers()}
             </Picker>
       </View>

      );
    }
   }

Answer 1

Вы можете добавить свои данные (элементы) в состояние компонента, а затем вывести их из состояния.

 getUsers(){
      var items = []
      firebase.database().ref().child("Users").on('value',function(snapshot) {
        snapshot.forEach(function(childData) {
          usersToShow.push(dta)
          items.push(<Picker.Item key ={childData.val().FullName} value={childData.val().FullName} label={childData.val().FullName} />)
        })
        this.setState({users:items})
      }

      )
}



render() {

  if (this.state.isLoading) {
    return (
      <View style={{flex: 1, paddingTop: 20}}>
        <ActivityIndicator />
      </View>
    );
  }

  return (
   <View style={styles.MainContainer}>

         <Picker
           selectedValue={this.state.PickerValueHolder}

           onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >
           {this.state.users}
         </Picker>
   </View>

  );
}

}