使用firebase数据设置状态后,react render未更新

我正试图进入我的firebase数据库,保存用户属于某个数组的所有组,然后将该数组推送到components状态,并相应地呈现一个项列表,但是我的呈现没有显示该状态中的项。

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

我通过进入我的firebase并从用户节点中获取用户所属的所有组,然后遍历“groups”节点并将该用户所属的所有组保存到该状态来设置组。我原以为渲染会在新状态下重新加载,但它显示为空。它没有显示 <p>You have no groups yet</p> 所以它认识到国家有团体,但只是显示一个空的 <ul> .