英文:
How do I map prisma object in a NextJS 13 app router
问题
Here's the translated code portion:
我使用 prisma（与 sqlite 一起） 并且有 User 模型存储 id、name 和 email。
在文件 /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>
)
}
您遇到的问题可能是因为 getAllUsers() 函数返回了一个 Promise，您需要等待它解析完成才能访问用户数据。您可以将 getAllUsers() 函数改为异步函数，并在调用它时使用 await。另外，确保您在函数组件内使用 await，以便等待数据解析完成。
英文:
I use prisma (with sqlite) and have User model store id, name, email.
In the file, /alluser/page.tsx, I have this function to read for prisma data.
export async function getAllUsers(){
const prisma = new PrismaClient()
const users = await prisma.user.findMany()
return{
users
}
from the function I got user object in the form of
[{id:1, email:'email1', name: 'name1'},{id:2, email:'email2', name: 'name2'}]
and in export default function I use
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>
)
}
I tried console log users from the function AllUser() and I got
Promise { { users: [ [Object], [Object], [Object] ] }, [Symbol(async_id_symbol)]: 1088649, [Symbol(trigger_async_id_symbol)]: 1088647, [Symbol(kResourceStore)]: undefined, ...
I tried using parse and stringify but still got
TypeError: undefined is not a function (near '...data.map...')
答案1
得分: 0
I guess you forget to await for promise:
get-all-users.ts:
export async function getAllUsers(){
const prisma = new PrismaClient()
const users = await prisma.user.findMany()
return users
}
Page component should be async
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>
)
}
英文:
I guess you forget to await for promise:
get-all-users.ts:
export async function getAllUsers(){
const prisma = new PrismaClient()
const users = await prisma.user.findMany()
return users
}
Page component should be async
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>
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论