为什么刷新 React JS - Firebase 后数据消失？答案

【问题标题】：Why Data disappear after refreshing React JS - Firebase?为什么刷新 React JS - Firebase 后数据消失？
【发布时间】：2021-09-27 19:44:31
【问题描述】：

您好，有一些我真的不明白，因为它根本没有任何意义，我有 2 段代码完全相同，唯一的区别是我用来查找集合的变量，其中一个即使在刷新后仍然存在另一个不在这里的是代码：

学生名单一：

const [estudiantes, setEstudiantes] = useState([]);
  const estudiantesRef = db.collection("usuarios").doc(user.uid).collection("estudiantes")

 useEffect(() => {
  estudiantesRef.onSnapshot(snapshot => {
    const tempData = [];
    snapshot.forEach((doc) => {
      const data = doc.data();
      tempData.push(data);
    });
    setEstudiantes(tempData);
  })
 }, []);

 console.log(user.uid)
 console.log(estudiantes)

书单一：

const [productos, setProductos] = useState([]);
    const productosRef = db.collection('libros');

    useEffect(() => {
        productosRef
        .orderBy('grado')
        .onSnapshot( snapshot => {
            
            const tempData = [];
            snapshot.forEach((doc) => {

              const data = doc.data();
              tempData.push(data);
            });
            setProductos(tempData);
        })
      }, []);

Gif student

Gif books list

更新：user.uid 始终存在，无论刷新如何，但是当我刷新时，estudiantes 中存储的数据会消失，这不好哈哈。为什么数据会消失？我只加载 1 个集合来测试它，它并没有消失，那么为什么当它进入多个集合时它会消失以及如何修复它？

刷新前

刷新后

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

这两段代码可能看起来完全做同样的事情，但事实是，它们并非如此。

estudiantesRef 参考：collection > document > collection

productosRef 参考：collection

您自然希望productosRef 返回更快，因为它只进行一次查找，但这也取决于每个集合中的记录数等。所以您应该仔细检查一下。此外，检索后对数据进行的任何额外处理都会影响显示所需的时间。

我的建议是你创建一个loading 状态（或使用console.log）来仔细检查你是否在预期的时候取回数据。

一个在刷新后仍然存在，另一个不存在

除非您使用 React.useState 以外的其他东西来存储您的状态，否则数据不应在刷新之间保持不变。这可能是本地缓存的结果，或者页面加载速度很快。

【讨论】：

学生经历了什么？ 2个用户？然后发送学生数量，在这种情况下为 6。虽然 productos 有 40 多个文件，但可能更多文件对我来说没有意义。加载状态？编辑：当我刷新数组时显示 0 数据，所以我没有取回数据。即使我可以看到学生 console.log 显示 [] 而不是 array[6]
如果 'estudiantesRef' 是问题所在，您确定 'user.uid' 在您拨打电话时总是有值吗？
用户 uid 始终存在，只是通过 console.log 检查，数据数组是随机消失的数据（将附加图像）
更新：我做错了项目的console.log，这就是为什么显示[]，现在我添加了correct console.log，而且更奇怪，因为我可以看到是正确的数据
@ReactPotato 你在哪里添加了控制台日志？正如 Kerron 指出的那样，如果您只是使用问题中提供的代码，则数据不会在刷新时持久化。

【解决方案2】：

不确定您是否还需要答案，但是：

为了让数据保持刷新，您应该在 localStorage 中设置您的项目

const item= localStorage.setItem('keyValue', 'dataToPersist')

然后通过以下方式获取数据：

const item= localStorage.getItem('keyValue')

【讨论】：

我正在使用本地数据，但仍然丢失数据：/ 我提出了一个新问题，因为“技术上”这个问题是“为什么数据...等”，我得到了他们告诉我的正确答案为什么会发生但不是如何解决，新问题在这里：How to make data persist on refresh

【解决方案3】：

我只是想澄清一下，在解决这个问题一周或更长时间后，答案并不是因为它是一个嵌套集合

（嵌套） estudiantesRef 参考：集合 > 文档 > 集合

（未嵌套） productosRef 引用：集合

这是因为我的代码中的用户在您刷新后立即被设置回 null，但如果您等待 2 秒，它会变回他的正常值。我所要做的就是在我的 firebase useEffect 的数组依赖项中使用 user。

但是，这意味着问题不是因为它是其他人指出的嵌套集合。就是这样，firebase 可以立即加载数据（只要没有明确的那么多值），只加载一条信息应该没有问题。

【讨论】：