reactjs 如何在NextJS13应用程序路由器中Mapprisma对象

7ivaypg9  于 2023-05-17  发布在  React
关注(0)|答案(1)|浏览(99)

我使用棱镜(与sqlite),并有用户模型存储ID,名称,电子邮件。在文件/alluser/page.tsx中,我可以读取这个函数以获取prisma数据。

export async function getAllUsers(){
const prisma = new PrismaClient()
const users = await prisma.user.findMany()
    
 return{
 users
}

从函数中我得到了用户对象
[{id:1, email:'email1', name: 'name1'},{id:2, email:'email2', name: 'name2'}]
在我使用的导出默认函数中

export default function AllUser() {

    const users = getAllUsers()
    
    return (
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <h1> All User </h1>
            {users.map((user) => (
            <li key={user.id}>
              <div>{user.name}</div>
              <div>{user.email}</div>
            </li>
          ))}
      </main>
    )
}

我尝试从函数AllUser()中控制台日志用户,并得到
Promise { { users: [ [Object], [Object], [Object] ] }, [Symbol(async_id_symbol)]: 1088649, [Symbol(trigger_async_id_symbol)]: 1088647, [Symbol(kResourceStore)]: undefined, ...
我尝试使用parse和stringify,但仍然得到TypeError: undefined is not a function (near '...data.map...')

abithluo

abithluo1#

我猜你忘了await的承诺:
get-all-users.ts

export async function getAllUsers(){
  const prisma = new PrismaClient()
  const users = await prisma.user.findMany()
    
  return users
  
}

页面组件应为异步page.tsx

export default async function AllUser() {

    const users = await getAllUsers()
    
    return (
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <h1> All User </h1>
            {users.map((user) => (
            <li key={user.id}>
              <div>{user.name}</div>
              <div>{user.email}</div>
            </li>
          ))}
      </main>
    )
}

相关问题