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

7ivaypg9 于 2023-05-17 发布在 React

关注(0)|答案(1)|浏览(98)

我使用棱镜（与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...')

reactjs

来源：https://stackoverflow.com/questions/76246445/how-do-i-map-prisma-object-in-a-nextjs-13-app-router

1条答案

按热度按时间

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

赞(0）回复(0）举报 2023-05-17

我来回答

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

1条答案

相关问题

热门标签

最新问答