Вивчайте Оновлення Елемента в Базі Даних | Розширені Можливості Next.js та Оптимізації

Оновлення рахунку — прості кроки

Під час оновлення рахунку процес дуже схожий на створення нового. Ось основні етапи:

Створення динамічного маршруту: Створення нового сегмента динамічного маршруту з включенням id рахунку. Таким чином, застосунок розуміє, з яким рахунком працювати;
Зчитування id рахунку: Отримання id рахунку з параметрів сторінки;
Отримання конкретного рахунку: Завантаження інформації про вибраний рахунок з бази даних;
Оновлення бази даних: Після внесення необхідних змін оновлення даних рахунку в базі даних.

Повернення до проєкту

1. Створення динамічного маршруту

На основі змінних даних можна створювати динамічні сегменти маршруту для гнучких шляхів. Щоб створити динамічний маршрут, обгорніть назву папки у квадратні дужки. Наприклад, використовуйте [id], [post] або [slug], якщо потрібні змінні сегменти у маршруті.

Перейдіть до папки /invoices і створіть новий динамічний маршрут з назвою [id];
Додайте новий маршрут з назвою 'edit' всередині папки /invoices/[id]. Додайте файл page.tsx.

Результат:

Розглянемо компонент Table у файлі app/ui/invoices/table.tsx. Можна побачити, що UpdateInvoice отримує id рахунку.

Перейдіть до компонента <UpdateInvoice /> (app/ui/invoices/buttons.tsx). Тут видно, що id використовується як частина значення href.

2. Зчитування id рахунку

Вставте наступний код у app/dashboard/invoices/[id]/edit/page.tsx.

3. Отримання конкретного рахунку

Далі імпортуємо нові функції: fetchInvoiceById та fetchSellers.

fetchInvoiceById повертає дані для конкретного рахунку;
fetchSellers повертає продавців для випадаючого списку у формі, що показує всіх продавців.

Можна ефективно отримати як рахунок, так і продавців одночасно, використовуючи Promise.all.

Перевіримо це! Відкрийте сторінку рахунків і натисніть кнопку редагування (значок олівця). Це має перенаправити вас до форми з попередньо заповненим рахунком.

4. Оновлення бази даних

Необхідно надіслати id до Server Action, щоб оновити відповідний запис у базі даних. Ось як це можна зробити ефективно:

Використовуйте JS bind для передачі id до Server Action. Це гарантує, що всі значення, які надсилаються до Server Action, будуть коректно закодовані.

Уникайте передачі id як аргументу безпосередньо у form action ось так:

// This won't work 
<form action={updateInvoice(id)}>

Далі переходимо до дій та створюємо дію для оновлення рахунку.

Спробуйте! Після редагування рахунку відправте форму, і ви будете перенаправлені на сторінку рахунків із оновленим рахунком.

На практиці

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 6. Розділ 6

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain how the dynamic route works in this context?

What should I do if the invoice form doesn't prefill with data?

How do I handle errors when updating an invoice?

Awesome!

Completion rate improved to 2.08

Свайпніть щоб показати меню