javascript - 从 firebase 获取数据后刷新选择器项目

Question

我最近开始学习 React Native 的开发，但遇到了一个问题，我目前正在使用 firebase 为应用程序编写注册系统，我希望用户使用选择器选择运动室，然后所有可供选择的运动室都是从 firebase 数据库中获取的。

我的代码如下:

getPickerElements() {
    var sportsRoomRef = firebase.database().ref('/sportsRoomList');
    var snapshotList = new Object();
    var pickerArr = [];

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

这是我认为的选择器:

<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>

我的问题是，当返回时，pickerArr 不包含任何内容，因为据我所知，.then() 是异步的，但不可能在 .then() 中使用 return。

我已经在这个问题上停留了很长一段时间，现在尝试了不同的方法，但由于我对 React Native 缺乏了解，我仍然没有找到解决方案。

我已经记录了 snapshotList 的内容，我可以肯定地说数据正在从数据库中正确获取，但我无法让选择器显示它。我该如何解决这个问题？

Answer 1

解决此问题的一种方法是将数据获取和表示分离。

更具体地说，将 snapshotList 放入组件状态并在组件挂载时触发数据获取。这样，组件最初不会显示任何内容，但一旦加载数据，它就会重新呈现并显示选择器项目。

类似的东西，但是在没有看到更多你的代码的情况下不能确定:

constructor() {
  this.state = {
    snapshotList: {},
  };
  this.getPickerElements = this.getPickerElements.bind(this);
}

componentDidMount() {
    var sportsRoomRef = firebase.database().ref('/sportsRoomList');

    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;
}