Привязка нативного средства выбора к данным, возвращаемым из Firebase - PullRequest
Новая
       12

Привязка нативного средства выбора к данным, возвращаемым из Firebase

0 голосов
/ 12 июня 2019

Используя «native» и «Firebase», я пытаюсь связать (обновить) «сборщик» (выпадающий список) из запроса, сделанного в Firebase. Настройка статической информации в порядке; однако, когда я пытаюсь «опросить» базу данных и получить информацию, я не могу заставить Пикер обновлять соответствующие элементы. Я знаю, что это асинхронный вызов - и я могу утешить конечную популяцию, поэтому я знаю, что данные возвращаются правильно. Я пробовал другие решения от переполнения стека, но ни одно из них в настоящее время не работает (последняя выставка). Я пытался объединить код в основу (см. Ниже). Последняя итерация говорит мне, что есть ошибка TypeError, оценивающая this.state.snapshot.

Может ли кто-нибудь подтолкнуть меня в правильном направлении или показать мне какой-нибудь простой код, «работающий» при извлечении данных из базы данных и обновлении средства выбора?

Я пытался использовать другие ответы на переполнение стека на этот вопрос, но они либо устарели, либо не работают. 

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

экспорт по умолчанию addanimal;

Я бы хотел, чтобы Picker обновился с возвращенными данными из Firebase

1 Ответ

0 голосов
/ 13 июня 2019

Попытайтесь окружить ваш getPickerElements() проверкой, чтобы убедиться, что он не выполняется, когда вы еще не получили ответ от Firebase: 

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

Обычно он должен повторно визуализироваться и добавитьновые предметы после того, как ваше состояние изменилось, чтобы отразить ответ Firebase.

...