将本机动态添加数据到 Picker

Question

我正在使用 react-native 选择器。

我想从 firebase 获取数据并将其动态插入到 Picker 中。

来自 firebase 的请求是异步的，所以我想使用它对我有利。

我有一个 function 从 firebase 获取数据，然后将 HTML 内容与数据一起返回给选择器。

问题是 getUsers() function 首先返回空数组，然后在 2 秒后返回我期望的完整数据。

但是选择器已经用一个空数组渲染了。

如何在运行时将数据插入选择器？

我不想使用“.then”或 promise，我希望每次 firebase 发送一个时，选择器都会添加项目。

这是从 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
    }

这是选择器代码

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

您可以在组件 state 上添加数据（项目），然后您可以从 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>

  );
}

}