我正在使用 Drizzle ORM 开发一个 Next.js 项目,我可以在其中创建和更新任务。提交任务表单后,我会导航回主页,但直到我手动刷新页面后才会显示新的/更新的任务。相关代码如下:
TaskForm.tsx
(客户端组件):
const onSubmit = async (values) => {
const response =
type === OperationType.Create
? await addTask(values)
: await updateTask(defaultValues?.id ?? 0, { ...defaultValues, ...values });
toast(response.message);
if (response.success) {
form.reset();
router.refresh(); // Trying to refresh the page
router.push(redirect ?? "/"); // Redirect to homepage after submission
}
};
app/page.tsx
(服务器组件):
export const revalidate = 0; // Disable ISR
export default async function Home() {
const tasks = await getTasks();
const completedTasks = tasks.filter(task => task.isCompleted);
const incompleteTasks = tasks.filter(task => !task.isCompleted);
return (
<div className="container">
<h1>Incomplete Tasks</h1>
<TodoListTable data={incompleteTasks} />
<h1>Completed Tasks</h1>
<CompletedListTable data={completedTasks} />
</div>
);
}
actions.ts
(Drizzle ORM 的服务器操作):
export async function addTask(task) {
try {
db.insert(tasks).values(task).run();
return { success: true, message: "Task created successfully" };
} catch (error) {
return { success: false, message: "Error creating task" };
}
}
任务已成功创建或更新,但是当页面导航回主页时,除非手动刷新页面,否则我看不到新任务。
我尝试过的:
router.refresh()
重新获取页面,但任务提交后似乎没有更新主页的数据。export const revalidate = 0;
中的 app/page.tsx
禁用了 ISR,以确保每次都能获取新数据。router.replace()
和router.push()
,但行为没有差异。我错过了什么?如何确保提交后主页始终反映更新的任务列表,而不需要手动刷新?