Чтение данных формы

Часть раздела Основы Next.js путешествия по React на Coddy — урок 31 из 47.

Ваш action принимает один аргумент: объект FormData. Это встроенный объект браузера, и вам понадобится всего один его метод:

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

Строка, которую вы передаете в get(), — это не id поля ввода и не его подпись. Это атрибут name:

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

Поле ввода без name невидимо для формы. Оно отображается, в него можно вводить текст, но его значение просто никогда не поступает: formData.get() возвращает null. Это самая распространенная ошибка в первой форме с server action, и она происходит незаметно.

get() всегда возвращает строку (или null), поэтому числовое поле нужно преобразовать:

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

Задание

Легко

Форма заметок подключена, но ничего полезного не сохраняется: у полей ввода нет name, а action сохраняет две пустые строки.

В app/page.jsx добавьте name="text" к первому полю ввода и name="author" ко второму.
В app/actions.js прочитайте оба поля из formData вместо использования пустых строк.

Оставьте id без изменений и сохраните вызов saveNote(text, author): изменятся только два значения над ним.

Попробуйте сами

import './globals.css';

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

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