Как перенаправить на страницу редактирования с идентификатором в качестве параметра запроса после подачи формы в next.jsJavascript

Форум по Javascript
Ответить
Anonymous
 Как перенаправить на страницу редактирования с идентификатором в качестве параметра запроса после подачи формы в next.js

Сообщение 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;


Подробнее здесь: https://stackoverflow.com/questions/795 ... er-form-su
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»