Odczytywanie danych formularza

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 31 z 47.

Twoje działanie otrzymuje jeden argument: obiekt FormData. Jest wbudowany w przeglądarkę i potrzebujesz z niego tylko jednej metody:

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

Ciąg znaków, który przekazujesz do get(), nie jest wartością id pola ani jego etykietą. Jest to atrybut name:

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

Pole wejściowe bez name jest niewidoczne dla formularza. Jest wyświetlane, możesz w nim pisać, ale jego wartość po prostu nigdy nie dociera: formData.get() zwraca null. To najczęstszy błąd w pierwszym formularzu z akcją serwera i nie sygnalizuje go żaden komunikat.

get() zawsze zwraca ciąg znaków (lub null), więc pole liczbowe wymaga konwersji:

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

Wyzwanie

Łatwy

Formularz notatek jest już skonfigurowany, ale nie zapisuje niczego przydatnego: pola wejściowe nie mają atrybutu name, a akcja zapisuje dwa puste ciągi znaków.

W app/page.jsx dodaj name="text" do pierwszego pola wejściowego, a name="author" do drugiego.
W app/actions.js odczytaj oba pola z formData zamiast używać pustych ciągów znaków.

Pozostaw identyfikatory bez zmian i zachowaj wywołanie saveNote(text, author): zmieniają się tylko dwie wartości powyżej niego.

Spróbuj swoich sił

import './globals.css';

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

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