Next.js `router.refresh ()` не обновлять данные после запроса post ⇐ Javascript

[Anonymous]

Я работаю над приложением Next.js, где я создаю новую платежную запись в базе данных. После создания записи я хочу обновить страницу, чтобы отобразить обновленный список платежей. Я использую router.refresh () , но новые данные не отображаются, если я вручную обновляю весь браузер. )/user/[userId] /page.tsx , который установлен для динамического отображения.

Код: Выделить всё

import { Suspense } from "react";
import { UserIdPageWrapper } from "./_components/userId-page-wrapper";

interface UserIdPageProps {
params: Promise;
}
export const dynamic = "force-dynamic";

export default async function UserIdPage({ params }: UserIdPageProps) {
const { userId } = await params;

return (



);
}

На странице используется компонент с именем useridpagewrapper для извлечения данных пользователя и платежей:

Код: Выделить всё

import { db } from "@/lib/db";
import { UserInfo } from "./userInfo";
import { redirect } from "next/navigation";

interface UserIdPageWrapperProps {
userId: string;
}
export const UserIdPageWrapper = async ({ userId }: UserIdPageWrapperProps) => {
const [userData, paymentsData] = await Promise.all([
db.user.findUnique({
where: {
id: userId,
},
}),

db.payment.findMany({
where: {
userId: userId,
},
include: {
items: true,
},
}),
]);

if (!userData || !paymentsData) {
redirect("/");
}

return (

);
};

Внутри компонента userinfo (клиентский компонент) у меня есть функция Handleaddpayment , которая отправляет запрос сообщения для создания нового платежа:
br />

Код: Выделить всё

"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";

interface userInfoProps {
user: User;
payments: (Payment & { items: PaymentItem[] })[];
}

export const UserInfo = ({ user, payments }: userInfoProps) => {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);

const handleAddPayment = async () => {
setIsLoading(true);
try {
const res = await fetch("/api/payments", {
method: "POST",
body: JSON.stringify({
userId: user.id,
totalAmount: 0,
supervisionRatio: 0,
}),
headers: {
"Content-Type": "application/json",
},
});

if (!res.ok) {
throw new Error("Failed to add payment");
}
const jsonData = await res.json();

console.log(jsonData);

toast.success("New payment added");
router.refresh();
} catch (error) {
toast.error("Failed to add payment");
} finally {
setIsLoading(false);
}
};

// ... rest of the component
};

/API/Payments обработчик маршрута выглядит следующим образом:

Код: Выделить всё

import { NextResponse } from "next/server";
import { db } from "@/lib/db";

export async function POST(req: Request) {
try {
const { userId, totalAmount, supervisionRatio } = await req.json();
const res = await db.payment.create({
data: {
userId,
totalAmount,
supervisionRatio,
supervisionFee: (totalAmount * supervisionRatio) / 100,
paymentDate: new Date(),
remainingAmount: totalAmount - (totalAmount * supervisionRatio) / 100,
},
});

return NextResponse.json(res);
} catch (error) {
console.error("[ORDERS_POST]", error);
return new NextResponse("Internal error", { status: 500 });
}
}

Я попытался настроить export const dynamic = "force-dynamic"; в моей Page.tsx файл, но он все еще не работает.
Что я пробовал: < /strong> < /p>

• Использование router.refresh () < /code> после Запрос сообщения.
• Настройка dynamic = "force-dynamic" в page.tsx file.

Что я ожидаю:
После создания нового платежа я ожидаю, что компонент платежа для повторного рендеринга с обновленным списком платежей без полного обновления браузера.
Вопрос: < /strong> < /p>
Чего мне не хватает? Есть ли проблема кэширования, или Router.refresh () Не правильный подход для этого сценария? Как я могу гарантировать, что страница обновляется с новыми данными после запроса POST?

Подробнее здесь: https://stackoverflow.com/questions/794 ... st-request