无法使用Prisma和Next.js创建数据库条目onClick

qlfbtfca  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(120)

我有一个Next.js本地项目,我正在使用Supabase PostgreSQL数据库和Prisma。我在我的页面上有一个按钮,我想点击,然后创建一个新的数据库条目。这是我的代码:

import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

async function uploadToDB(){
    
    const user = await prisma.tableName.create({ data: {name:"Random Name"}})

}

export default function Home() {

 return(
   <div>
    <button onClick={e => uploadToDB()}></button>
   </div>
 )
}

创建数据库的操作在没有附加到按钮onClick事件时工作正常。有办法做到这一点吗?我收到的错误是:

    • error错误:事件处理程序不能传递给客户端组件属性。*
<button className=... onClick={function} children=...>
  • 如果您需要交互性,请考虑将其部分转换为stringify上的客户端组件 *

我尝试在页面顶部添加“使用客户端”,但随后收到错误:

  • 错误:PrismaClient无法在浏览器中运行 *

任何帮助修复此错误或完整的变通方法将不胜感激。谢谢你!

deyfvvtc

deyfvvtc1#

在Next 13中,所有组件默认都是服务器组件,如果你想要交互性,你需要在顶部添加use client指令,请参考这里。
我看到,在你添加了use client指令后,它抛出了Prisma无法在浏览器中运行的错误,你可以阅读更多关于here错误的信息。
要解决此问题,请删除use client指令,并使用Next.js Route Handler构建一个路由,该路由使用Prisma创建表,然后在客户端组件中调用该API路由,下面是一个关于Prisma with Next 13的好指南

相关问题