javascript - Hur deklarerar man useState() med ett initialt värde som null och sedan ger det ett objektvärde senare?

Som kan ses på bilden, vill jag deklarera en React state hook för alerten på min webbsida. Först vill jag att ingen alert ska visas. Och när användaren klickar på någon knapp vill jag visa en success-alert med ett meddelande (error-alert om något går fel). Jag kommer att kalla på showAlert-funktionen för att göra detta med meddelande och typ som funktionsparametrar. Därför kan det finnas mer än en typ av alert. Så jag skapade detta alert-objekt och fäste hooken med initialvärdet "NULL". Men editorn ger mig detta fel.

Argument of type '{ msg: any; type: any; }' is not assignable to parameter of type 'SetStateAction<null>'. Object literal may only specify known properties, and 'msg' does not exist in type '(prevState: null) => null'.ts(2345)

Så, kan någon säga mig hur jag kan tala om för useState vilka objektparametrar jag kommer att tilldela det i framtiden. Eller borde jag försöka dölja webbplatsvarningen på något annat sätt? Här är koden..

const [alert, setAlert] = useState(null);

const showAlert = (message, type) => {
    setAlert({
        msg: message,
        type: type,
    });

    setTimeout(() => {
        setAlert(null);
    }, 2000);

Denna lösning fungerar inte för mig.

Svar #1

Utifrån hur felet du nämnde ser ut, verkar det som att du använder TypeScript.

Ett sätt att uppnå önskat resultat är att använda generiska typer.

const [alert, setAlert] = useState<{
  msg: string;
  type: "success" | "error";
} | null>(null);

Dessutom kan du förbättra läsbarheten genom att lägga till en enum och en typ.

enum AlertType {
  Success,
  Error,
}

type Alert = {
  msg: string;
  type: AlertType;
}

const [alert, setAlert] = useState<Alert | null>(null);

Svar #2

Du kan göra det på följande sätt för useState-typ

type AlertType = {
 msg: string;
 type: string; // you can specify enum also
}

const [alert, setAlert] = useState<AlertType|null>(null);

const showAlert = (message, type) => {
    setAlert({
        msg: message,
        type: type,
    });

    setTimeout(() => {
        setAlert(null);
    }, 2000);

Relaterade artiklar