Question

我正在使用本机选择器。

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

firebase的请求是异步的，因此我想使用它。

我有一个功能，可以从firebase中获取数据，然后将包含数据的HTML内容返回给选择器。

问题在于getUsers（）函数在第一个空数组处返回，并在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

您可以在组件状态上添加数据（项目），然后可以从状态中渲染数据。

 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>

  );
}

}

对本机添加数据进行动态反应

1 个答案: