将数据从端点存储到变量并防止变量在初始重新加载后接受来自端点的数据

Question

所以我有一个看起来像这样的数据响应 -

"data": [
        {
            "_id": "65a52c333972416e3ef579a9",
            "kitchenName": "Micdamilare Cuisine",
            "image": "https://1703115912.png"
        },
        {
            "_id": "65a52c333972416e3ef579d3",
            "kitchenName": "So Fresh",
            "image": "https://1703192022.jpeg"
        },
        {
            "_id": "65a52c333972416e3ef579c8",
            "kitchenName": "The Nest Lounge",
            "image": "https://1703082755.jpeg"
        },
        {
            "_id": "65a52c333972416e3ef579ad",
            "kitchenName": "Bobby Best Continental",
            "image": "https://1705318137.jpeg"
        },
        {
            "_id": "65a5345ae04e780a3a7038db",
            "kitchenName": "Labule",
            "image": "https://1705187022.jpeg"
        },
        // ...more objects here
]

我正在使用 useeffect 来调用此端点并将数据存储在数组中。现在，每次我离开页面并返回时，此端点都会调用，这是正确的，因为它是有用的，但问题是来自端点的数据不一致。所以我的意思是顺序改变，相同的数据，但顺序改变使得网站总是改变所显示内容的位置。有人告诉我要保留数据并运行一个条件，我没有明白他说的很好，但是在一次加载后不应再次调用端点，或者在一次加载后数据不应存储在该变量中，但我是新手所以不太明白他想说什么。有人可以给我一些简单的建议，告诉我该做什么，如果可能的话，提供一个突出显示该过程的代码。

我尝试将数据存储到本地存储并将其映射以显示 UI，但这是错误的，因为数据仍在设置中。也许考虑重新加载的条件会起作用，但我不知道该怎么做。

Answer 1

我看到您可能会考虑两种方法：

1. 根据数据中的某些属性对从 API 接收的数据进行排序，以便即使 API 以不同的顺序返回数据，顺序在 UI 中也保持一致。例如，以下内容将根据

   data

   值按字典顺序对

   _id

   进行排序：

data.sort((a,b) => a._id < b._id ? 1 : a._id > b._id ? -1 : 0)

2. 将数据存储从 API 调用移至应用程序组件树中“更高层”的组件。您可以使用全局状态管理系统（例如 Redux、mobx、Zustrand 等）或采用开销较少的解决方案，例如 React 的 Context API。然后，在 useEffect 中，您可以确定数据是否已经捕获：如果是，则使用现有数据；如果是，则使用现有数据。如果没有，则调用API并将返回的数据放入状态解中。就我个人而言，我可能会选择 Context API 方法。