Form Verilerini Okuma

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

Eyleminiz bir bağımsız değişken alır: bir FormData nesnesi. Bu, tarayıcıda yerleşik bir özelliktir ve ondan yalnızca 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 özniteliği olmayan bir girdi form tarafından görünmez. Görüntülenir, içine yazabilirsiniz ve değeri hiçbir zaman ulaşmaz: formData.get() size null döndürür. Bu, ilk sunucu eylemi formundaki en yaygın 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

Not formu bağlandı, ancak kaydedilen yararlı hiçbir şey yok: girdilerin name özelliği yok ve action iki boş dize kaydediyor.

app/page.jsx içinde, ilk input’a name="text", ikinci input’a name="author" ekle.
app/actions.js içinde, boş dizeleri kullanmak yerine her iki alanı da formData üzerinden oku.

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

Kendin dene

import './globals.css';

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

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