Обновление элементов выбора после извлечения данных из Firebase

Question

Я начал изучать разработку на React Native сравнительно недавно и столкнулся с проблемой, сейчас я пишу систему регистрации для приложения, использующего 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 () , является асинхронным, но невозможно использовать return внутри .then ().

Я застрял в этой проблеме довольно долгое время, пробуя разные вещи, и до сих пор не нашел решения из-за недостатка знаний о React Native.

Я вошел в системусодержимое snapshotList , и я могу точно сказать, что данные правильно извлекаются из базы данных, но я не могу заставить сборщик отображать их.Как я могу это исправить?

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

Answer 2

Поставьте список в вашем штате и соедините его с вашим сборщиком.Вы можете найти пример в моем хранилище здесь:

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

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