קריאת נתוני טופס

חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 31 מתוך 47.

הפעולה שלך מקבלת ארגומנט אחד: אובייקט 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. זהו הבאג הנפוץ ביותר בטופס הראשון שמשתמש בפעולת שרת, והוא נכשל בשקט.

get() תמיד מחזירה מחרוזת (או null), לכן צריך להמיר שדה מספרי:

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

אתגר

קל

הטופס של ההערות מחובר, אבל לא נשמר בו שום דבר שימושי: לשדות הקלט אין name, והפעולה שומרת שתי מחרוזות ריקות.

ב־app/page.jsx, הוסף name="text" לשדה הקלט הראשון ו־name="author" לשני.
ב־app/actions.js, קרא את שני השדות מתוך formData במקום להשתמש במחרוזות הריקות.

השאר את המזהים כפי שהם, והשאר את הקריאה ל־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>
    );
}