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

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 时，我需要按 dateTime 的升序加载训练数据，并按图像底部所示的 trainingName 进行过滤。

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

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

Answer 1

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

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

Clear a react state field before refreshing with new data from firebase

javascript

firebase

reactjs

redux

react-redux-firebase