Установка состояния из данных Firebase приводит к пустым данным - PullRequest
0 голосов
/ 20 декабря 2018

Я пытаюсь загрузить все «группы» из моей Firebase после загрузки моего приложения React, но у меня странное поведение.Сначала он корректно загружает их, поэтому, если в моей базе данных сохранено 3 группы, будет показано 1, 2, 3, 4, например: enter image description here

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

enter image description here

Код, который я должен загрузить группы на componentDidMount, таков:

componentDidMount(){        
    this.setGroups();
}
setGroups(){
    const groupRef = fire.database().ref('groups');
    const groupArray = [];
    const idArray = [];
    groupRef.on('value', snapshot => {
        snapshot.forEach(group => {
            console.log('groupid: ' + group.key);
            idArray.push(group.key);
            let addGroup = {
                id: group.key,
                name: group.val().name
            }
            if(groupArray.length !== idArray.length){
                groupArray.push(addGroup);
                console.log('pushed');
            }
        })

        this.setState(previousState => ({
            groups: groupArray
        }));
    })
}

Тогда вот как я обрабатываю добавляемую группу:

handleGroupAdd = (group) => {
    const groupRef = fire.database().ref('groups').child(group.id).set({
        name: group.name,
        id: group.id
    });
    this.setState(previousState => ({
        groups: [...previousState.groups, group]
    }));

    this.handleClose();
};

База данных хранит данные правильно, без дублированных объектов, так что это просто рендеринг групп, который испортился.Что я предполагаю, что состояние испорчено над надстройкой?

1 Ответ

0 голосов
/ 20 декабря 2018

Объяснение вашей проблемы:

Вы запускаете прослушиватель снимка с помощью groupRef.on, этот слушатель вызывает функцию каждый раз, когда ваш groupRef контент изменяется, тогда онподталкивая все значения к groupArray каждый раз.Поскольку groupArray объявлено вне функции моментального снимка, его содержимое сохраняется между обновлениями.

Вот что происходит:

  1. Первый рендер:

setGroup называется => groupArray = [1,2,3,4];

Добавить группу:

groupRef Слушатель запущен => нажать [1,2,3,4,5] на groupArray => groupArray = [1,2,3,4,1,2,3,4,5] => обновление состояния в handleGroupAdd => groups state = [... prevState, 5];

ИсправитьВы можете выполнить следующие действия:

  • Вызовите прослушиватель снимков только один раз:

groupRef.once('value', snapshot => {...

  • Или полагаться только на слушателей:

переместить объявление groupArray в функцию снимка:

groupRef.on('value', snapshot => {
  let groupArray = [];
  ...

и удалить обновление состояния в handleGroupAdd;

Я советую вам полагаться на слушателей, чтобы поддерживать согласованность между вашим фронтом и базой данных, есть много других слушателей, с которыми можно работать вместо «значения», вы можете прочитать официальный документ для получения дополнительной информации.о работе со списками базы данных реального времени

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...