Typescript 无法通过 Prisma 使用 Next.js 13 api 路由从数据库中删除条目

发布于07月24日

因此，我正在开发一个TODO管理器，并且一直在使用Next.js13、Prisma和MySQL来实现同样的功能.为了添加删除待办事项的选项，我用Link标记包装了删除按钮，如下所示:

...
<Link href={`/api/todo/${id}`}>
          <MdDelete className="bg-red-400 hover:bg-red-600 p-1 text-3xl rounded-xl" />
</Link>
...

其中id作为props 传递给组件./app/api/todo/[id]/route.ts条如下:

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

export async function DELETE(
  req: Request,
  { params }: { params: { id: string } }
) {
  await prisma.todo.delete({
    where: {
      id: params.id,
    },
  });
  return NextResponse.json({ message: "done" });
}

但当按下链接时，它会转到URL http://localhost:3000/api/todo/clkgkh3t70000p1947hi24a3k，并显示以下页面:

其中clkgkh3t70000p1947hi24a3k是通过的id.

这个问题有解决办法吗？或者，删除此待办事项的替代方案是什么？

<MdDelete onClick={async (e) => { e.preventDefault() await fetch(`/api/todo/${id}`, { method: "DELETE" }); // You can then redirect, or refresh a state, etc... }} className="bg-red-400 hover:bg-red-600 p-1 text-3xl rounded-xl" />

Typescript 无法通过 Prisma 使用 Next.js 13 api 路由从数据库中删除条目

推荐答案

Typescript相关问答推荐

如何使用TypScript和react-hook-form在Next.js 14中创建通用表单组件？

如果我有对象的Typescript类型，如何使用其值的类型？

了解TS类型参数列表中的分配

在泛型类型中对子代执行递归时出错

TypeScrip：基于参数的条件返回类型

如何在TypeScript中将一个元组映射(转换)到另一个元组？

在不更改类型签名的情况下在数组并集上映射文字

如何在方法中正确地传递来自TypeScrip对象的字段子集？

APP_INITIALIZER在继续到其他Provider 之前未解析promise

复选框Angular 在Ngfor中的其他块中重复

具有匹配功能的TS通用事件处理程序

创建一个函数，该函数返回一个行为方式与传入函数相同的函数

如何在Angular /字体中访问API响应的子元素？

在类型脚本中创建显式不安全的私有类成员访问函数

作为参数的KeyOf变量的类型

如何在Reaction Native中关注屏幕时正确更新状态变量？

如何在TypeScrip中使用数组作为字符串的封闭列表？

完全在类型系统中构建的东西意味着什么？

可以用任意类型实例化，该类型可能与

带有 Select 器和映射器的Typescript 泛型