Menu
CoddyTech
Bắt đầu học

Đọc dữ liệu biểu mẫu

Thuộc phần Kiến thức thiết yếu về Next.js trong hành trình React của Coddy. Bài học 31 trên 47.

Hàm xử lý của bạn nhận một đối số: đối tượng FormData. Đây là đối tượng có sẵn trong trình duyệt, và bạn chỉ cần dùng một phương thức của nó:

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

Chuỗi bạn truyền vào get() không phải là id của ô nhập, cũng không phải nhãn của ô nhập. Đó là thuộc tính name:

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

Trường đầu vào không có name sẽ vô hình với biểu mẫu. Trường vẫn hiển thị, bạn có thể nhập vào, nhưng giá trị của nó không bao giờ được gửi đi: formData.get() trả về null. Đây là bug phổ biến nhất trong biểu mẫu dùng server action đầu tiên, và lỗi này xảy ra âm thầm.

get() luôn trả về một chuỗi (hoặc null), vì vậy cần chuyển đổi trường số:

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

Thử thách

Dễ

Biểu mẫu ghi chú đã được kết nối, nhưng không lưu được gì hữu ích: các ô nhập không có name, và action lưu hai chuỗi rỗng.

  1. Trong app/page.jsx, thêm name="text" vào ô nhập đầu tiên và name="author" vào ô nhập thứ hai.
  2. Trong app/actions.js, đọc cả hai trường từ formData thay vì dùng các chuỗi rỗng.

Giữ nguyên các id và giữ nguyên lời gọi saveNote(text, author): chỉ thay đổi hai giá trị ở phía trên lời gọi đó.

Tự làm thử

import './globals.css';

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

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}
quiz iconTự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong Kiến thức thiết yếu về Next.js

1Vì sao dùng Next.js

Next.js bổ sung gìThư mục appTrang đầu tiênÔn tập: Vì sao dùng Next.js

4Máy chủ và client

Hai loại thành phầnĐọc lỗiDòng 'use client'Giữ phần client nhỏ gọnMáy chủ bên trong clientTóm tắt: máy chủ và client

7Điều hướng phía máy khách

Liên kết đang hoạt độngĐiều hướng bằng codeLọc bằng URLBộ xử lý tuyến đườngÔn tập: Điều hướng

2Định tuyến và liên kết

Thư mục tạo thành tuyến đườngTuyến đường lồng nhauLiên kết các trangTuyến đường độngTrang không tìm thấyÔn tập: định tuyến

5Dữ liệu trên máy chủ

Thành phần bất đồng bộChờ tham số của tuyếnHai lần gọi dữ liệu cùng lúcTrạng thái tảiXử lý lỗiÔn tập: Lấy dữ liệu

8Dự án: Coddy Eats

Bước 1: Bộ khungBước 2: Lưới thực đơnBài học dự ánBước 3: Trang món ănBài học dự ánBước 4: Trạng thái tảiBài học dự ánBước 5: Tiêu đề trangBài học dự ánBước 6: Thêm vào giỏ hàngBài học dự ánBước 7: Bộ lọc danh mụcBài học dự ánBước 8: Viết đánh giáBài học dự ánBước 9: Tìm kiếm trực tiếpBài học dự án

3Bố cục và siêu dữ liệu

Bố cục gốcĐiều hướng dùng chungBố cục lồng nhauSiêu dữ liệu trangSiêu dữ liệu độngÔn tập: bố cục

6Server Actions

Server Action là gìBiểu mẫu có thể hoạt độngĐọc dữ liệu biểu mẫuLàm mới trangÔn tập: Server Actions