如何在Button的onClick功能之后或期间重定向？

Posted 2023-03-05

【中文标题】如何在Button的onClick功能之后或期间重定向？

【英文标题】：How to redirect after or during the onClick function of Button?

【发布时间】：2022-01-01 10:49:03

【问题描述】：

我正在尝试在我的 Next.js 网站中添加一项功能，该功能允许用户单击按钮来创建新组，然后将他们重定向到“邀请成员”页面，该页面使用动态 URL 中自动生成的 group_id路由。我目前正在使用 Next.js 的路由器，但我觉得有更好（或工作）的方式来做到这一点。 JS（export default function groups ()内）：

const [num, setNum] = useState("");
const router = useRouter()
const createGroup = async () => 
  const  data, error  = await supabase
    .from("chatgroups")
    .insert([
      
        group_name: groupName,
        creator: user.email,
        description: groupDesc,
        accepted_members: user.email + " ",
        invited_members: ""
      
    ]);

  if (error) 
    console.log(error);
   else 
    setNum("/groups/" + String(data[0].group_id));
    
    router.push(num);
  
;

html（以相同的 JS 脚本返回）：

<button type="button" className="bg-yellow-500 rounded px-12 py-2" onClick=()=> 
  createGroup()
   >Insert test group</button>

我尝试将路由器用于服务器和客户端，但都无法识别 .push()

import  Router  from "next/dist/client/router";
import  Router  from "next/dist/server/router"; //neither of these recognized the method.

我的目标是执行 createGroup() 函数，其中“data”的值将接收自动生成的新 SQL 行的 int id。然后我想用这个id重定向到“/groups/[id]”，其中[id]是新的ID。我尝试使用带有const [num, setNum] 的链接，但它在设置新值之前执行重定向。我对 Next.js 比较陌生，因此我将不胜感激。

期望的输出： 单击按钮 -> 将行添加到 group_id = 17 的 SQL 表。 将用户重定向到“/groups/invite_members/17”。

编辑：我已将上面的主要 JS 代码更新为使用 useRouter()，现在它仅在每第二次点击时才有效。

【问题讨论】：

设置状态是异步操作，你在router.push调用中使用的num在你第一次点击按钮时不会有你在setNum(...)设置的值。尝试将值设置为变量并在 router.push 调用中使用它，例如const path = "/groups/" + String(data[0].group_id); 然后设置状态并调用router.push(path);。

@juliomalves 谢谢你，解决了！

【参考方案1】：

问题是调用setNum does not update num immediately，因为设置状态是一个异步操作。

这意味着在调用router.push(num) 时，在第一个按钮上单击num 时仍将具有其默认值（""），并且只有在第二次单击该按钮时，num 状态才会更新为之前设置的值。

要修复它，您可以将值设置为变量并在 router.push 调用中使用它。

const path = "/groups/" + String(data[0].group_id);

setNum(path);

router.push(path);