Jak přesměrovat po nebo během onClick funkce Tlačítka?

Question 1

Snažím se přidat funkci, v mém Next.js webové stránky, které umožňuje uživatelům klepněte na tlačítko vytvořit novou skupinu, pak přesměrovat je na "Pozvat členy" stránku, která používá automaticky generované group_id v URL s dynamické směrování. Já jsem v současné době pomocí Next.js's Router, ale mám pocit, že je lepší (nebo pracovní) způsob, jak to udělat. JS (v 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 (vráceno ve stejném JS skript):

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

Snažil jsem se pomocí Routeru na obou serveru a klienta, a to jak neuznal .push()

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

Mým cílem je vykonávat funkci createGroup(), ve které hodnota "data", obdrží automaticky generované int id nového SQL řadě. Pak chci použít toto číslo pro přesměrování "/skupin/[id]", kde [id] je nový ID. Snažil jsem se pomocí Odkazu s const [num, setNum], ale to provede redirect, NEŽ se nová hodnota je nastavena. Jsem poměrně nový na Next.js, takže bych ocenil jakoukoliv pomoc s tímto.

Požadovaný výstup: Klepněte na tlačítko -> přidá řádek do SQL tabulky s group_id = 17. Přesměrovat uživatele na "/skupin/invite_members/17".

Edit: jsem aktualizoval můj hlavní JS kódu výše k použití useRouter(), teď to funguje pouze každé druhé kliknutí.

Question 2

Problém je, že volání setNum neaktualizuje num ihned, jako je nastavení stavu je asynchronní operace.

To znamená, že na první tlačítko klepněte na tlačítko num bude stále mít svou výchozí hodnotu (""), když router.push(num) se říká, a pouze tehdy, když kliknete na tlačítko podruhé bude num stát aktualizován s hodnotou nastavenou dříve.

To opravit, můžete nastavit hodnotu do proměnné a použít v router.push zavolat místo.

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

setNum(path);

router.push(path);

juliomalves · Answer 1 · 2021-11-22T23:19:12

Problém je, že volání setNum neaktualizuje num ihned, jako je nastavení stavu je asynchronní operace.

To znamená, že na první tlačítko klepněte na tlačítko num bude stále mít svou výchozí hodnotu (""), když router.push(num) se říká, a pouze tehdy, když kliknete na tlačítko podruhé bude num stát aktualizován s hodnotou nastavenou dříve.

To opravit, můžete nastavit hodnotu do proměnné a použít v router.push zavolat místo.

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

setNum(path);

router.push(path);

Jak přesměrovat po nebo během onClick funkce Tlačítka?

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii