我正在嘗試在我的 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 比較陌生，因此我將不勝感激。
所需的輸出：單擊按鈕 -> 向 SQL 表中添加 group_id = 17 的行。將用戶重定向到“/groups/invite_members/17”。
編輯：我已經更新了我上面的主要 JS 代碼以使用 useRouter()，現在它只在每兩次點擊一次。
uj5u.com熱心網友回復：
問題是呼叫setNum不會num立即更新，因為設定狀態是一個異步操作。
這意味著在呼叫第一個按鈕時，單擊num仍然具有其默認值 ( "") router.push(num)，并且只有在第二次單擊按鈕時，num狀態才會更新為先前設定的值。
要修復它，您可以將該值設定為一個變數并在router.push呼叫中使用它。
const path = "/groups/" String(data[0].group_id);
setNum(path);
router.push(path);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/364460.html
標籤：javascript html 反应 重定向 下一个.js
下一篇：用戶正確登錄后如何重定向用戶？