带有 useEffect 的 Next.js useRouter 即使在页面刷新时满足条件也会推送

Posted 2023-03-17

【中文标题】带有 useEffect 的 Next.js useRouter 即使在页面刷新时满足条件也会推送

【英文标题】：Next.js useRouter with useEffect pushes even if condition is met on page refresh

【发布时间】：2021-12-31 16:00:20

【问题描述】：

我遇到了useRouter 和useEffect 的问题，如果不满足某个条件，我想重定向用户。

在第 1 页上，您选择一个 amount，该amount 被传递到上下文中并在第 2 页上被检索。

在第 2 页我有这种情况：

import  useEffect, useContext  from "react";
import  useRouter  from "next/router";
import AppContext from "../context/AppContext";

const PageTwo = () => 
  const  amount  = useContext(AppContext);
  const router = useRouter();
  useEffect(() => 
    if (!amount || amount == null) 
      router.push("/page-1"); // redirect if no amount is selected
    
  );

  return (
    ...
  );
;

当我们到达第 2 页时，我有 amount，但是当您刷新页面时，即使设置了 amount，它也会将您引导回 page-1。当您直接转到page-2 时，它工作正常，而不在page-1 上选择金额，它会将您重定向回page-2。

在这种情况下，上下文 API 和/或 useRouter 和 useEffect 的工作方式可能有问题。

这是一个有问题的 CodeSanBox 示例：

https://codesandbox.io/s/next-js-userouter-with-useeffect-6645u?file=/pages/page-2.js

【问题讨论】：

如果您在“AppContext”中保持“amount”状态并且用户进行页面刷新，“amount”状态将是它的默认值。你确定吗？ “当您刷新页面时，即使设置了数量，它也会将您引导回第 1 页。”

没错。即使设置了amount，在page-2 上的页面刷新时，它也会直接返回page-1。当控制台记录数量时，您可以看到它在那里。也许我会设置一个快速的 CodeSandBox 来详细说明自己。

你得到未定义的瞬间导致重定向回第 1 页。

这很奇怪，因为在设置数量时，它也被存储在 localStorage 中。关于如何解决这个问题的任何想法？也许有更好的方法来处理这个问题。

【参考方案1】：

在clearAmount 函数和_app 文件中的useState("") 中将null 更改为空字符串("") 而不是(null)。此外，将您的 if 语句更改为 if (amount === "")。解决了它，这是我从你的沙箱中分叉出来的。 https://codesandbox.io/s/next-js-userouter-with-useeffect-forked-t2enf?file=/pages/page-2.js

【讨论】：

我想我们快到了。问题是，在“新”页面访问中，您仍然可以直接访问page-2 并停留在page-2 上并显示：The amount is: null。相反，它也应该重定向回page-1。

在 _app.useState("") 中添加相同的空字符串。我更新了答案..

我讨厌成为坏消息的带来者，但现在当您在page-1 上选择金额时，然后在page-2 上刷新页面。它会将您重定向回page-1

【参考方案2】：

出现这种情况是因为即使在上下文中设置了新的amount 值后，在重新加载页面时，它的初始值在第一次渲染时将是null，这发生在应用程序检查并设置localStorage 值之前。这会触发重定向在setAmount(amount) 使用来自localStorage 的存储值调用。

为了通过最小的更改来防止这种情况，您可以修改触发重定向到以下内容的检查。确保还将amount 添加到useEffect 的依赖项数组中。

useEffect(() => 
    if (amount === "") 
        router.push("/page-1");
    
, [amount]);

如果未存储任何值，您还必须将传递给 setAmount 中的 _app 的值更改为默认为空字符串。

useEffect(() => 
    const amount = localStorage.getItem("amount") ?? "";
    setAmount(amount);
, []);

这允许我们为初始状态值 (null) 和空值 ("") 设置不同的值。这意味着在使用存储在localStorage 中的值更新amount 之前不会发生重定向。

最后，为了保持逻辑一致，您必须更新clearAmount 函数，将amount 设置为空值。

const clearAmount = () => 
    setAmount("");
;