从Firebase获取数据后刷新选择器项目

时间:2018-12-11 14:41:39

标签: javascript reactjs firebase react-native promise

我最近才开始在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。 / p>

我已经在这个问题上停留了很长时间了,现在尝试其他的事情,但是由于我对React Native缺乏了解,我仍然没有找到解决方案。

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

3 个答案:

答案 0 :(得分:3)

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

更具体地说,将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;
}

答案 1 :(得分:1)

确定要代表视图的数据;这是状态。在您的情况下,可能是例如snapshot或snapshotList。决定何时获取该数据。构造函数是一种选择。

constructor() {
    this.state = {
        snapshotList: new Object()
        // and whatever else
    }
    this.getSnapshotList.bind(this);
    this.getSnapshotList();
}

使用setState将数据存储在您的状态。

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

    sportsRoomRef.once('value').then(snapshot => {
        snapshotList = snapshot.val();
        this.setState({ snapshotList });
    })
}

然后在渲染期间从该状态派生当前的getPickerElements。

render() {
    const { snapshotList } = this.state;
    var pickerArr = [];

    for (var key in snapshotList) {
        pickerArr.push(<Picker.Item label={snapshotList[key]} value={snapshotList[key]}/>);
    }

    <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'/>
        {pickerArr}
    </Picker>

答案 2 :(得分:1)

将列表置于您的状态,并将其与选择器连接。您可以在我的存储库中找到一个示例:

https://snack.expo.io/@mukeyii/cGlja2