此问题在此处已有答案:
Update Server Component after data has been changed by Client Component in Next.js(4个答案)
Data is not being updated (always getting the same result) after the project is deployed(2个答案)
18小时前关门了。
目前正在学习next.js,有点挣扎。当删除文本被点击时,它应该触发toggleDelete函数。它成功地从数据库中删除数据,但不会立即反映UI上的更改。我已经尝试了几件事,但总是以运行时错误告终。
你会怎么做?谢谢!
import { TodoItem } from "@/components/TodoItem";
import { prisma } from "@/db";
import Link from "next/link";
function getTodos() {
return prisma.todo.findMany();
}
async function toggleTodo(id: string, complete: boolean) {
"use server";
await prisma.todo.update({ where: { id }, data: { complete } });
}
async function toggleDelete(id: string) {
"use server";
await prisma.todo.delete({ where: { id } });
}
export default async function Home() {
const todos = await getTodos();
return (
<>
<header className="flex justify-between items-center mb-4">
<h1 className="text-2xl">Todos</h1>
<Link
className="border border-slate-300 text-slate-300 px-2 py-1 rounded hover:bg-slate-700 focus-within:bg-slate-700 outline-none"
href="/new"
>
New
</Link>
</header>
<ul className="px-4">
{todos.map((todo) => (
<TodoItem key={todo.id} {...todo} toggleTodo={toggleTodo} toggleDelete={toggleDelete} />
))}
</ul>
</>
);
}
个字符
1条答案
按热度按时间yk9xbfzb1#
您可以在删除函数中重新验证该高速缓存。
https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations
字符串