Leggere i dati dei moduli

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 31 di 47.

La tua azione riceve un argomento: un oggetto FormData. È integrato nel browser e ti serve un solo metodo:

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

La stringa che passi a get() non è l'id dell'input, né la sua etichetta. È l'attributo name:

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

Un input senza name è invisibile al modulo. Viene visualizzato, puoi scriverci e il suo valore semplicemente non arriva mai: formData.get() restituisce null. Questo è il bug più comune nei primi moduli con azioni server e si verifica senza alcun avviso.

get() restituisce sempre una stringa (o null), quindi un campo numerico deve essere convertito:

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

Sfida

Facile

Il modulo delle note è configurato, ma non viene salvato nulla di utile: agli input manca name e l’azione salva due stringhe vuote.

In app/page.jsx, aggiungi name="text" al primo input e name="author" al secondo.
In app/actions.js, leggi entrambi i campi da formData invece di usare le stringhe vuote.

Mantieni gli id così come sono e mantieni la chiamata saveNote(text, author): cambia solo i due valori sopra di essa.

Provalo tu

import './globals.css';

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

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