قراءة بيانات النموذج

جزء من قسم أساسيات 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، وليست التسمية التوضيحية الخاصة به (label). بل هي خاصية name:

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

إن أي عنصر مدخل لا يحتوي على name يكون غير مرئي للنموذج. يتم عرضه على الشاشة، ويمكنك الكتابة فيه، ولكن قيمته ببساطة لا تصل أبداً: يُرجع formData.get() القيمة null. هذا هو الخطأ الأكثر شيوعاً في أول نموذج لـ server-action، وهو يفشل بهدوء.

تعيد get() دائمًا سلسلة نصية (أو null)، لذلك يحتاج حقل الرقم إلى تحويل:

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

التحدي

سهل

تم توصيل نموذج الـ notes، ولكن لا يتم حفظ أي شيء مفيد: الـ input ليس لديها name، والـ action يحفظ سلسلتين نصيتين فارغتين.

في app/page.jsx، أضف name="text" إلى الـ input الأول و name="author" إلى الثاني.
في app/actions.js، اقرأ كلا الحقلين من formData بدلاً من استخدام السلاسل النصية الفارغة.

احتفظ بالـ ids كما هي، واحتفظ باستدعاء 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>
    );
}