将本机动态添加数据到 Picker

Question

I'm using react-native picker.

I want to get data from firebase and insert it dynamically to the Picker.

the request from the firebase is asynchronous, so I want to use it to my favor.

I have a function that getting the data from the firebase and then returning HTML content with the data to the picker.

the problem is that the getUsers() function returning at first empty array and after 2 seconds it returning the full data that I was expecting.

but the picker already rendered with an empty array.

how I insert the data to the picker in run time?

I don't want to use ".then" or promise, I want the picker will add item each time the firebase sending one.

this is the code that getting the data from the firebase

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
    }

and this is the picker code

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

You can add your data (items) on component state and then you can render it from the state.

 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>

  );
}

}