Я строю приложение для управления книгами, используя Next.js. У меня есть форма, которая собирает подробности книг и подчиняет их, используя асинхронную функцию (OnSubmit). Данные формы отправляются в файл Action.ts , где он подтвержден и вставлен в базу данных Supabase. После успешного представления я хочу перенаправить пользователя на страницу редактирования при передаче ISBN недавно отправленной книги в URL.
//submitting the forms
async function onSubmit(data: BookInferSchema) {
try {
const formData = new FormData();
Object.entries(data).forEach(([key, value]) => {
formData.append(
key,
value instanceof Date ? value.toISOString() : value.toString()
);
});
//sending the formData to the action.ts for submitting the forms
const response = action(formData) as {
error?: string;
message?: string;
} | void;
//Error or success messages for any submissions and any errors/success from the server
if (response?.error) {
toast({
title: "Error",
description: `An error occurred: ${response.error}`,
});
} else {
//after submitting the form, reset the form
// form.reset();
}
} catch {
toast({
title: "Error",
description: "An unexpected error occured.",
});
}
}
А вот фрагмент моего действия.const validatedFields = BookSchema.safeParse({
ISBN: formData.get("ISBN"),
//...other fields
});
if (!validatedFields.success) {
console.error("Validation Errors:", validatedFields.error.format());
return {
errors: validatedFields.error.flatten().fieldErrors,
};
}
const { ISBN } = validatedFields.data;
const supabase = createClient();
const { data, error } = await (await supabase)
.from('books')
.insert({
isbn: ISBN,
// ... other fields
});
if (error) {
return {
error: true,
message: error.message,
};
}
return {
error: false,
message: 'Book updated successfully',
};
< /code>
Что я попробовал: < /p>
Я попытался вернуть ISBN: < /p>
const successMessage = {
error: false,
message: "Book updated successfully",
ISBN,
};
return successMessage;
и используйте его здесь внутри A! Ответ?// Perform the redirect after returning the success message
redirect(`/admin/books/${ISBN}/edit`);
Но это показала бы эту ошибку приложения, и это то, что консоль будет перенаправить меня с помощью: https://nextjs.org/docs/messages/sync-dynamic-apis Конечно, я могу получить доступ к этой странице, так как я также обращаюсь к странице перенаправления для просмотра каждой книги. < /p>
const BookEdit = async (props: { params: Promise }) => {
const supabase = await createClient();
const {
data: { user },
} = await supabase.auth.getUser();
if (!user) {
return redirect("/login");
}
const params = await props.params;
const id = params.id;
const books = await fetchAllBooks(id);
const bookData = books ? books[0] : null;
return Edit Book {JSON.stringify(bookData, null, 2)};
};
export default BookEdit;
Подробнее здесь: https://stackoverflow.com/questions/795 ... er-form-su
Как перенаправить на страницу редактирования с идентификатором в качестве параметра запроса после подачи формы в next.js ⇐ Javascript
Форум по Javascript
1742013659
Anonymous
Я строю приложение для управления книгами, используя Next.js. У меня есть форма, которая собирает подробности книг и подчиняет их, используя асинхронную функцию (OnSubmit). Данные формы отправляются в файл Action.ts , где он подтвержден и вставлен в базу данных Supabase. После успешного представления я хочу перенаправить пользователя на страницу редактирования при передаче ISBN недавно отправленной книги в URL.
//submitting the forms
async function onSubmit(data: BookInferSchema) {
try {
const formData = new FormData();
Object.entries(data).forEach(([key, value]) => {
formData.append(
key,
value instanceof Date ? value.toISOString() : value.toString()
);
});
//sending the formData to the action.ts for submitting the forms
const response = action(formData) as {
error?: string;
message?: string;
} | void;
//Error or success messages for any submissions and any errors/success from the server
if (response?.error) {
toast({
title: "Error",
description: `An error occurred: ${response.error}`,
});
} else {
//after submitting the form, reset the form
// form.reset();
}
} catch {
toast({
title: "Error",
description: "An unexpected error occured.",
});
}
}
А вот фрагмент моего действия.const validatedFields = BookSchema.safeParse({
ISBN: formData.get("ISBN"),
//...other fields
});
if (!validatedFields.success) {
console.error("Validation Errors:", validatedFields.error.format());
return {
errors: validatedFields.error.flatten().fieldErrors,
};
}
const { ISBN } = validatedFields.data;
const supabase = createClient();
const { data, error } = await (await supabase)
.from('books')
.insert({
isbn: ISBN,
// ... other fields
});
if (error) {
return {
error: true,
message: error.message,
};
}
return {
error: false,
message: 'Book updated successfully',
};
< /code>
Что я попробовал: < /p>
Я попытался вернуть ISBN: < /p>
const successMessage = {
error: false,
message: "Book updated successfully",
ISBN,
};
return successMessage;
и используйте его здесь внутри A! Ответ?// Perform the redirect after returning the success message
redirect(`/admin/books/${ISBN}/edit`);
Но это показала бы эту ошибку приложения, и это то, что консоль будет перенаправить меня с помощью: https://nextjs.org/docs/messages/sync-dynamic-apis Конечно, я могу получить доступ к этой странице, так как я также обращаюсь к странице перенаправления для просмотра каждой книги. < /p>
const BookEdit = async (props: { params: Promise }) => {
const supabase = await createClient();
const {
data: { user },
} = await supabase.auth.getUser();
if (!user) {
return redirect("/login");
}
const params = await props.params;
const id = params.id;
const books = await fetchAllBooks(id);
const bookData = books ? books[0] : null;
return Edit Book {JSON.stringify(bookData, null, 2)};
};
export default BookEdit;
Подробнее здесь: [url]https://stackoverflow.com/questions/79510632/how-do-i-redirect-to-an-edit-page-with-the-id-as-a-query-parameter-after-form-su[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия