Реактивный рендер не обновляется после установки состояния с данными Firebase

Question

Я пытаюсь зайти в свою базу данных Firebase и сохранить все группы, к которым принадлежит пользователь, в массиве, затем перевести этот массив в состояние компонентов и соответствующим образом отобразить список элементов, но мой рендер не показывает элементы из состояния,

componentDidMount(){
    this.setGroups();
}
setGroups(){
    const user = fire.default.auth().currentUser.uid;
    const dbRef = fire.default.database();
    const currentUserRef = dbRef.ref('users').child(user);
    const userGroups = currentUserRef.child('groups');
    const groupsRef = dbRef.ref('groups');
    const idArray = []
    const groupArray = []
    userGroups.on('value', snapshot => {
        snapshot.forEach(groupId => {
            idArray.push(groupId.val().groupId)
        })
        idArray.forEach(function(group, i) {
            groupsRef.child(idArray[i]).on('value', snap =>{
                let addGroup = {
                    id: snap.key,
                    name: snap.val().groupName,
                    description: snap.val().groupDescription,
                };
                groupArray.push(addGroup);
            })
            this.setState({
                hasGroups: true,
                groupsHold: groupArray,
            })
        }.bind(this))
    })
}
render(){
    console.log(this.state.hasGroups)
    if(this.state.hasGroups){
        return(
            <div>
                <ul>
                    {this.state.groupsHold.map((group, i) => 
                        <ListItem button
                        selected={this.state.selectedIndex === group}
                        onClick={event => this.handleListItemClick(event, group, i)}
                        key={`item-${group.id}`}>
                            <ListItemText primary={`${group.name}`} />
                        </ListItem>
                    )}
                </ul>
            </div>
        )
    }
    return(
        <div>
            <p>You have no groups yet</p>
        </div>
    )
}

Я устанавливаю группы, захожу в свою базу данных и собираю все группы, частью которых является пользователь, из своего пользовательского узла, затем перебираю узел 'groups' и сохраняю все группы, которыми является пользователь.часть от того к государству.Я ожидал, что рендер перезагрузится в новом состоянии, но он отображается пустым.Он не показывает <p>You have no groups yet</p>, поэтому он распознает, что в штате есть группы, а просто показывает пустой <ul>.

Answer 1

Вызовы в Firebase являются асинхронными, но setGroups не является функцией async, как вы ее написали. Я думаю, что ваша проблема будет решена, если вы сделаете setGroups async функцию и await ваш вызов userGroups.on('value', () => {}) внутри нее.

В настоящее время ваш компонент устанавливает состояние, когда groupsArray пусто. Так что, хотя this.state.hasGroups верно, нет групп для рендеринга!