如何在next.js中更改数据库后立即更新UI [重复]

x6492ojm  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(127)

此问题在此处已有答案

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>
    </>
  );
}

个字符

yk9xbfzb

yk9xbfzb1#

您可以在删除函数中重新验证该高速缓存。
https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations

// import function to server component 
import { revalidatePath } from 'next/cache'

//call function in your delete method 
async function toggleDelete(id: string) {
   "use server";
   await prisma.todo.delete({ where: { id } });
   revalidatePath('/')
}

字符串

相关问题