时间戳

首页 > 解决方案 > 将 react-native Picker 绑定到从 Firebase 返回的数据

firebase - 将 react-native Picker 绑定到从 Firebase 返回的数据

问题描述

使用 react native 和 Firebase，我试图从对 Firebase 的查询中绑定（刷新）一个 Picker（下拉列表）。设置静态信息就可以了；但是，当我尝试“轮询”数据库并检索信息时，我无法让 Picker 使用适当的项目进行更新。我知道这是一个异步调用——我可以安慰最终的人口，所以我知道数据正在正确返回。我已经尝试过堆栈溢出的其他解决方案，但目前都没有工作（最新博览会）。我试图将代码与基础知识配对（见下文）。最新的迭代告诉我有一个 TypeError 评估 this.state.snapshot。

谁能在正确的方向上推动我，或者在从数据库中提取数据并更新 Picker 时向我展示一些“有效”的简单代码？

我尝试使用其他堆栈溢出答案来解决这个问题，但它们要么已经过时，要么不起作用。

class addanimal extends React.Component{
constructor() {
    this.state = {
      snapshotList: {},
    };
    this.getPickerElements = this.getPickerElements.bind(this);
  }

  componentDidMount() {
    //var sportsRoomRef = firebase.database().ref('/sportsRoomList');
    let userID = f.auth().currentUser.uid; // grab the current users userId
    //var pickerArr = [];

    var sportsRoomRef = database.ref('animals/'+userID).orderByChild('animaltype').equalTo('ram');


    sportsRoomRef.once('value').then(snapshot => {
        var snapshotList = snapshot.val();
        this.setState({snapshotList});
    })
}   
getPickerElements() {
    var pickerArr = [];
    var snapshotList = this.state.snapshotList;
    for (var key in snapshotList) {
        pickerArr.push(<Picker.Item label={snapshotList[key]} value={snapshotList[key]}/>);
    }
    return pickerArr;
}

  render() {
    return (
      <View style={{marginTop: 100}}>
          <Picker
            selectedValue={this.state.pickerSelection}
            style={[{width: 290, height: 50, color: 'black'}, pickerStyle]}
            onValueChange={(itemValue) => this.setState({pickerSelection: itemValue})}>
            <Picker.Item label='Salle de sport' value='default'/>
            {getPickerElements()}
        </Picker>
      </View>
    );
  }
}

导出默认添加动物；

我希望 Picker 使用 Firebase 返回的数据进行更新

标签： firebasereact-nativeexpopicker

解决方案

尝试在您周围getPickerElements()加上一个检查，以确保当您尚未收到 Firebase 的响应时它不会执行：

{this.state.snapshotList !== undefined &&
    getPickerElements()
}

一旦您的状态发生更改以反映 Firebase 响应，它通常应该重新渲染并添加新项目。

推荐阅读