时间戳

首页 > 解决方案 > 从 Firebase 数据设置状态会导致空白数据

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

问题描述

一旦我的 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 正确保存数据，没有重复的对象，因此它只是呈现混乱的组。我猜哪个州在添加上搞砸了？

标签： reactjsfirebasefirebase-realtime-database

解决方案

您的问题的解释：

您正在使用 启动快照侦听器groupRef.on，每次您的内容发生更改时，此侦听器都会调用一个函数，然后每次都groupRef将所有值推送到。groupArray因为groupArray是在快照函数之外声明的，所以它的内容在更新之间保持不变。

这是发生了什么：

  1. 第一次渲染：

setGroup被称为 => groupArray= [1,2,3,4];

  1. 添加组：

groupRef监听器被触发 => 将 [1,2,3,4,5] 推送到groupArray=> groupArray= [1,2,3,4,1,2,3,4,5] => 状态更新handleGroupAdd =>groups状态 = [ ...上一页状态，5]；

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

  • 只调用一次快照监听器：

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

  • 或仅依靠听众：

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

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

并删除状态更新handleGroupAdd；

我建议您依靠侦听器来保持前端和数据库之间的一致性，还有许多其他侦听器可以使用而不是“值”侦听器，您可以阅读官方文档以获取有关使用实时数据库列表的更多信息

推荐阅读