Form Verilerini Okuma

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası — ders 31 / 47.

Eyleminiz (action) bir bağımsız değişken alır: bir FormData nesnesi. Bu, tarayıcının yerleşik bir özelliğidir ve bundan yalnızca tek bir yönteme ihtiyacınız vardır:

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

get() metoduna geçirdiğiniz dize, girdinin id değeri veya etiketi değildir. Bu, name özniteliğidir:

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

name niteliği olmayan bir input, form için görünmezdir. Ekranda oluşturulur, içine yazabilirsiniz ancak değeri hiçbir zaman ulaşmaz: formData.get() geriye null döndürür. Bu, ilk server-action formlarında en sık yapılan hatadır ve sessizce başarısız olur.

get() her zaman bir dize (veya null) döndürür, bu nedenle bir sayı alanının dönüştürülmesi gerekir:

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

Görev

Kolay

Notes formu bağlandı, ancak kullanışlı hiçbir şey kaydedilmiyor: input öğelerinin name özelliği yok ve action iki adet boş string kaydediyor.

app/page.jsx içinde, ilk input öğesine name="text" ve ikincisine name="author" ekleyin.
app/actions.js içinde, boş stringleri kullanmak yerine her iki alanı da formData üzerinden okuyun.

id'leri olduğu gibi bırakın ve saveNote(text, author) çağrısını koruyun: yalnızca üstündeki iki değer değişmelidir.

Kendin dene

import './globals.css';

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

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