Website-Suche

javascript - Wie deklariert man den anfänglichen Wert von useState() als null und gibt ihm später einen Objektwert?

Wie auf dem Bild zu sehen ist, möchte ich einen React-State-Hook für die Benachrichtigung meiner Webseite deklarieren. Zuerst möchte ich, dass keine Benachrichtigung angezeigt wird. Und jedes Mal, wenn der Benutzer auf einen Button klickt, möchte ich eine Erfolgsmeldung (oder eine Fehlermeldung, wenn etwas schief geht) anzeigen. Ich werde die Funktion showAlert aufrufen, um dies mit Nachricht und Typ als Funktionsparameter zu tun. Deshalb kann es mehr als eine Art von Benachrichtigung geben. Also habe ich dieses Benachrichtigungsobjekt erstellt und den Hook mit dem Anfangswert „NULL“ verbunden. Aber der Editor gibt mir diesen Fehler.

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)

Also, kann mir jemand sagen, wie ich useState die Objektparameter mitteilen kann, die ich ihm in Zukunft zuweisen werde? Oder sollte ich versuchen, das Website-Alert auf einem anderen Weg zu verstecken? Hier ist der Code..

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

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

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

Diese Lösung funktioniert für mich nicht.

Antwort #1

Anhand des von Ihnen erwähnten Fehlers scheint es, dass Sie TypeScript verwenden.

Eine Möglichkeit, das gewünschte Ergebnis zu erzielen, besteht darin, Generika zu verwenden.

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

Außerdem können Sie die Lesbarkeit verbessern, indem Sie ein Enum und einen Typ hinzufügen.

enum AlertType {
  Success,
  Error,
}

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

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

Antwort #2

Du kannst es auf folgende Weise für den useState-Typ machen

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);

Verwandte Artikel