フォームデータの取得

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 31/47。

action は1つの引数として FormData オブジェクトを受け取ります。これはブラウザ組み込みのオブジェクトであり、必要なメソッドは1つだけです：

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

get() に渡す文字列は、input の id でもラベルでもありません。それは name 属性です:

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

name がない input はフォームから認識されません。レンダリングされ、入力することもできますが、その値が送信されることはありません。formData.get() は null を返します。これは、初めてサーバーアクションフォームを作成する際に見られる最も一般的なバグであり、エラーメッセージを出すことなく静かに発生します。

get() は常に文字列（または null）を返すため、数値フィールドは変換する必要があります：

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

チャレンジ

簡単

ノートのフォームは接続されていますが、役に立つデータは保存されません。入力領域に name がなく、アクションが2つの空文字を保存しています。

app/page.jsx で、最初の input に name="text" を追加し、2番目の input に name="author" を追加します。
app/actions.js で、空文字を使用する代わりに formData から両方のフィールドを読み取ります。

id はそのままにし、saveNote(text, author) の呼び出しも維持してください。その上にある2つの値のみを変更します。

自分で試してみよう

import './globals.css';

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

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