javascript - 在刷新Firebase中的新数据之前，请清除反应状态字段(Clear a react state field before refreshing with new data from firebase)

Question

The screenshot is from State.Firestore.ordered.trainings in the console.

(屏幕截图来自控制台中的State.Firestore.ordered.trainings。)

Let's say exampleA.js has the following codes of

(假设exampleA.js具有以下代码)

firestoreConnect([
    {
      collection: "trainings",

  ])

while exampleB.js has the following codes of

(而exampleB.js具有以下代码：)

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

    }
  ])

When I first loaded exampleA.js, the trainings data are loaded randomly from the database(Firestore), as shown and highlighted in the upper part of image.

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

But, when I am moving to exampleB.js,I need the training data to be loaded in the ascending order of dateTime and filtered by trainingName as shown in the bottom part of the image.

(但是，当我转向exampleB.js时，我需要按照dateTime的升序加载训练数据，并按图片的底部所示按trainingName进行过滤。)

The problem is when it is loading exampleB.js, the random order of data will be rendered first for a while(as they are already in the state.firestore.ordered.training in the prervious load of exampleA.js), before the sorted/ascending order of filtered data are rendered.

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

This really give a bad user interaction experiences and I do not know how to fix it.

(这确实给用户带来糟糕的用户交互体验，我不知道如何解决。)

Is there any way to delete/clear the data in state.firestore.ordered everytime it is moving to new page?

(每次移动到新页面时，有什么方法可以删除/清除state.firestore.ordered中的数据吗？)

or is there a way to delay the render until state.firestore.unordered.data are fully updated?

(还是有一种方法可以延迟渲染，直到state.firestore.unordered.data完全更新？)

Thank you in advance!

(先感谢您！)

  ask by LY Hooi translate from so

Answer 1

等待大神答复