reactjs - 在 NextJS 中实现本地相似/不相似功能并使其在客户端路由之间持续存在

Question

我有一个使用 NextJS 构建的博客前端应用程序它看起来像这样:

这里的每张卡都是一个名为 PostPreview.jsx 的功能组件。如您所见，每个组件都带有一个心形图标。默认情况下，该图标保持灰色。然而，当点击它时，它会变成红色，表示该帖子已被喜欢。此操作仅在用户登录时发生。如果没有，单击心形图标会显示登录模式。

现在，我只专注于使“喜欢”在客户端导航之间持续存在，即不与数据库/服务器进行任何交互。

到目前为止，单击图标可以正常切换颜色。但是，当您导航离开时(例如，单击帖子标题，然后单击后退按钮返回此页面)，它无法持续存在。实现此功能的推荐方法是什么？

整个代码库可以在我的存储库中找到:https://github.com/amitschandillia/proost/tree/master/web

相关组件的代码 ( PostPreview.jsx ) 位于: https://github.com/amitschandillia/proost/blob/master/web/components/blog/PostPreview.jsx

该网站已上线:https://www.schandillia.com/blog .

我知道我可以使用 Redux，但不确定如何防止每次重新渲染时重置该值，即使使用 Redux 也是如此。

更好地说明问题

访问博客页面；组件 ( PostPreview ) 的多个实例首次渲染:

1. 通过 likedBy 接收帖子“点赞者”数组 Prop 对象。

2. 通过 userInfo.userID 从 Redux 存储中检索登录用户的 ID .

3. 查找userInfo.userID反对likedBy.readers ID 数组。

4. 如果用户 ID 存在于 readers 中数组，帖子被点赞，设置liked至error将心形图标变成红色并推送帖子的id到likedPosts redux 商店。

5. 如果 readers 中不存在用户 ID数组，离开 liked至inherit将其保留为灰色并删除帖子的 id来自likedPosts redux 商店。

喜欢一个帖子；单击心形图标:

1. 设置liked至error将心形图标变成红色。

2. 推送帖子的 id到likedPosts redux 商店。

与帖子不同；单击心形图标:

1. 设置liked至inherit将心形图标变成红色。

2. 删除帖子的id来自likedPosts redux 商店。

现在，单击页面上的任何链接即可离开该页面(客户端路由，此处没有服务器联系)。然后点击浏览器的back按钮返回博客页面。

此时，组件(PostPreview)重新渲染，redux store会按照原来的likedBy重置 Prop 对象。当然，这意味着自第一次渲染以来的所有更改都消失了。这就是我需要帮助的地方。您将如何处理这样的情况:用户交互(例如喜欢和不喜欢)必须在客户端导航中保留，并且在重新呈现时也得到尊重？

Answer 1

我看到两种方法:

1)简单:通过使用本地存储，您可以编写喜欢的数组

likes: [likedPostId1, likedPostId2, ...]

然后在 PostPreview 中检查当前卡 ID 是否包含在 Likes 数组中

let isLiked = likes.includes(currentPostId);

2) 右:通过使用 Redux，方法是相同的，但是您将在 Redux 中存储 Likes 数组并用于页面导航 react-router 。 了解导航在 SPA 中的工作原理非常重要