Formulardaten auslesen

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 31 von 47.

Deine `action` erhält ein Argument: ein FormData-Objekt. Es ist im Browser integriert, und du benötigst nur eine Methode davon:

export async function addNote(formData) {
    const text = formData.get('text');
    const author = formData.get('author');
    saveNote(text, author);
}

Der String, den Sie an get() übergeben, ist nicht die id des Eingabefelds und auch nicht dessen Label. Es ist das name-Attribut:

<input name="author" />      →  formData.get('author')

Ein Eingabefeld ohne name ist für das Formular unsichtbar. Es wird gerendert, Sie können darin tippen, aber sein Wert kommt einfach nie an: formData.get() gibt null zurück. Das ist der häufigste Fehler bei einem ersten Server-Action-Formular, und er schlägt stillschweigend fehl.

get() gibt immer einen String (oder null) zurück, daher muss ein Zahlenfeld umgewandelt werden:

const quantity = Number(formData.get('quantity'));

Aufgabe

Einfach

Das Notiz-Formular ist eingerichtet, aber es wird nichts Nützliches gespeichert: Die Eingabefelder haben kein name-Attribut und die Aktion speichert zwei leere Strings.

Füge in app/page.jsx dem ersten Eingabefeld name="text" und dem zweiten Eingabefeld name="author" hinzu.
Lies in app/actions.js beide Felder aus formData aus, anstatt die leeren Strings zu verwenden.

Behalte die IDs so bei, wie sie sind, und behalte den Aufruf saveNote(text, author) bei: Nur die beiden Werte darüber ändern sich.

Probier es selbst

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}