Lire les données d'un formulaire

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 31 sur 47.

Votre action reçoit un argument : un objet FormData. Il s'agit d'un objet intégré au navigateur, et vous n'avez besoin que d'une seule de ses méthodes :

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

La chaîne que vous passez à get() n'est pas l'id de l'élément input, ni son libellé. Il s'agit de l'attribut name :

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

Un input sans name est invisible pour le formulaire. Il s'affiche, vous pouvez y écrire, et sa valeur n'arrive simplement jamais : formData.get() renvoie null. C'est le bug le plus courant dans un premier formulaire d'action server, et il échoue en silence.

get() retourne toujours une chaîne de caractères (ou null), donc un champ numérique doit être converti :

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

Défi

Facile

Le formulaire de notes est relié, mais rien d'utile n'est enregistré : les champs input n'ont pas de name, et l'action enregistre deux chaînes vides.

Dans app/page.jsx, ajoutez name="text" au premier champ input et name="author" au second.
Dans app/actions.js, lisez les deux champs depuis formData au lieu d'utiliser les chaînes vides.

Conservez les identifiants tels quels et conservez l'appel saveNote(text, author) : seules les deux valeurs situées au-dessus doivent changer.

Essayez vous-même

import './globals.css';

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

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