Firebase数据的设置状态会导致空白数据

我试图在我的React应用程序加载后从Firebase加载所有“组”,但我的行为越来越怪异。它首先会正确地加载它们,因此如果我在数据库中保存了3个组,它将显示1、2、3、4,如下所示:

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

firebase正确地保存了数据,没有重复的对象,所以它只是将组渲染得一团糟。我猜这是因为州政府在add上搞砸了?