Estoy tratando de agregar una característica en mi sitio web Next.js que permite a los usuarios hacer clic en un botón para crear un nuevo grupo, luego redirigirlos a una página de "Invitar miembros" que usa el group_id generado automáticamente en la URL con enrutamiento dinámico. Actualmente estoy usando el enrutador de Next.js, pero creo que hay una forma mejor (o funcional) de hacerlo. JS (dentro 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 (devuelto en el mismo script JS):
<button type="button" className="bg-yellow-500 rounded px-12 py-2" onClick={()=> { createGroup() }} >Insert test group</button>Intenté usar el enrutador tanto para el servidor como para el cliente y ambos no reconocieron .push()
import { Router } from "next/dist/client/router"; import { Router } from "next/dist/server/router"; //neither of these recognized the method. Mi objetivo es ejecutar la función createGroup(), en la que el valor de "datos" recibirá la identificación int generada automáticamente de la nueva fila de SQL. Luego, quiero usar esta identificación para redirigir a "/groups/[id]", donde [id] es la nueva identificación. Intenté usar un enlace con const [num, setNum] , pero realiza la redirección ANTES de establecer el nuevo valor. Soy relativamente nuevo en Next.js, por lo que agradecería cualquier ayuda con esto.
Resultado deseado: haga clic en el botón -> agrega una fila a la tabla SQL con group_id = 17. Redirija al usuario a "/groups/invite_members/17".
Editar: He actualizado mi código JS principal arriba para usar useRouter(), ahora solo funciona cada segundo clic.
El problema es que llamar asetNum no actualiza num inmediatamente , ya que establecer el estado es una operación asíncrona.
Esto significa que al hacer clic en el primer botón, num seguirá teniendo su valor predeterminado ( "" ) cuando se router.push(num) , y solo al hacer clic en el botón por segunda vez, el estado de num se habrá actualizado con el valor establecido anteriormente.
Para solucionarlo, puede establecer el valor en una variable y usar eso en la llamada router.push en su lugar.
const path = "/groups/" + String(data[0].group_id); setNum(path); router.push(path);