javascript - 在刷新来自 firebase 的新数据之前清除 react 状态字段

Question

屏幕截图来自控制台中的 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 时，我需要按日期时间的升序加载训练数据，并按图像底部所示的 trainingName 进行过滤。

问题是当它加载exampleB.js时，数据的随机顺序会先渲染一段时间(因为它们已经在之前加载exampleA.js时的state.firestore.ordered.training中)，在呈现过滤数据的排序/升序之前。

这确实会给用户带来糟糕的交互体验，我不知道如何解决。每次移动到新页面时，有什么方法可以删除/清除 state.firestore.ordered 中的数据吗？或者有没有办法延迟渲染直到 state.firestore.unordered.data 完全更新？提前致谢!

Answer 1

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