时间戳

首页 > 解决方案 > 在使用来自 firebase 的新数据刷新之前清除反应状态字段

javascript - 在使用来自 firebase 的新数据刷新之前清除反应状态字段

问题描述

在此处输入图像描述

屏幕截图来自控制台中的 State.Firestore.ordered.trainings。假设 exampleA.js 有以下代码 

firestoreConnect([
    {
      collection: "trainings",

  ])

而 exampleB.js 有以下代码

 firestoreConnect([
    {
      collection: "trainings",
      orderBy: ["dateTime", "asc"],
      where:[["trainingName","==","abc123"]]

    }
  ])

当我第一次加载 exampleA.js 时，训练数据是从数据库（Firestore）中随机加载的，如图上部所示并突出显示。

但是，当我移动到 exampleB.js 时，我需要按 dateTime 的升序加载训练数据并按 trainingName 过滤，如图底部所示。

问题是当它加载 exampleB.js 时，数据的随机顺序将首先呈现一段时间（因为它们已经在 exampleA.js 的先前加载中的 state.firestore.ordered.training 中），然后再排序/ 呈现过滤数据的升序。

这真的给了糟糕的用户交互体验，我不知道如何解决它。每次移动到新页面时，有什么方法可以删除/清除 state.firestore.ordered 中的数据？或者有没有办法延迟渲染直到 state.firestore.unordered.data 完全更新？先感谢您！

标签： javascriptreactjsfirebasereduxreact-redux-firebase

解决方案

如果您已经获取了示例 A 中的数据，那么对现有数据客户端进行排序比对完全相同的数据发出新的网络请求更有意义。我建议在这种情况下做一个客户端sort()或reduce()（如果你只想要一个数据子集，则减少，例如只有名为 abc123 的项目）。

推荐阅读