Question

一旦我的React应用程序加载，我试图从Firebase加载所有的“组”，但是我得到了奇怪的行为。它将首先正确地加载它们，因此，如果我在数据库中保存了3个组，它将显示1、2、3、4，如下所示：

但是一旦我将另一个组添加到列表中，它就会执行以下操作：

我必须在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();
};

firebase正确地保存了数据，没有重复的对象，因此它只是呈现混乱的组的呈现。我猜是状态被添加了吗？

Answer 1

您的问题的说明：

您正在使用groupRef.on启动快照侦听器，每次您的groupRef内容更改时，此侦听器都会调用一个函数，然后每次将所有值推入groupArray。由于groupArray是在快照函数外部声明的，因此其内容将保留在更新之间。

这是正在发生的事情：

第一个渲染：

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状态= [... prevState，5];

要解决您的问题，您可以：

仅调用一次快照侦听器：

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

或仅依赖听众：

在快照函数中移动groupArray声明：

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

并删除handleGroupAdd中的状态更新；

我建议您依靠侦听器来保持前端与数据库之间的一致性，还有许多其他侦听器可用于代替“ {value}” you can read the official doc for more info about working with lists of realtime database

从Firebase数据设置状态导致空白数据

1 个答案:

您的问题的说明：

要解决您的问题，您可以：