[英]Error: How to serialize data from getStaticProps in Next.js
[英]Next.js getStaticProps passing data as object
我是使用 typescript 和 next.js 的新手。 我正在使用 Vercel 部署 Next.js webapp,它将使用 Prisma 从 heroku postgresSQL 数据库中提取数据。 我正在尝试使用 observable/d3 在页面上呈现一些数据,使用 getStaticProps 获取数据,然后将其传递给主页组件。
export const getStaticProps: GetStaticProps = async () => {
let data: Array<object> = await prisma.test.findMany()
console.log(data)
return { props: { data } }
}
const Home: NextPage = ( data ) => {
console.log(data)
useEffect(() => {
document.body.append(
Plot.barY(data, {x: "letter", y: "frequency"}).plot()
)
}, [])
...
}
getStaticProps 中的第一个控制台日志以我想要的格式返回数据,一个对象数组:
[
{letter: 'A', frequency: 0.0123}
...
{letter: 'Z', frequency: 0.00234}
]
将数据传递给 Home 组件后, data
被包裹在一个对象中,如下所示:
{
data: [
{letter: 'A', frequency: 0.0123}
...
{letter: 'Z', frequency: 0.00234}
]
}
我的绘图函数需要一个对象数组,但是在使用 getStaticProps 将data
传递给 Home 组件之后, data
被“包裹”在那些 JS Curley 大括号中,我不想要这样。 有人可以帮助我理解为什么以及如何纠正这种行为吗? 在 console.log 中使用 typeof 数据返回object
你应该已经解构了道具Home({ data })
而不是Home(data)
import { InferGetStaticPropsType } from 'next'
type Test = {
letter: string
frequency: number
}
export const getStaticProps = async () => {
let data: Test[] = await prisma.test.findMany()
return {
props: {
data
}
}
}
// Destructure the props
const Home: NextPage = ({ data }: InferGetStaticPropsType<typeof getStaticProps>) => {
// will resolve tests to type Test[]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.