Next.js getStaticProps 将数据作为对象传递答案

【问题标题】：Next.js getStaticProps passing data as objectNext.js getStaticProps 将数据作为对象传递
【发布时间】：2021-12-22 15:49:45
【问题描述】：

我是使用 typescript 和 next.js 的新手。我正在使用 Vercel 部署 Next.js webapp，它将使用 Prisma 从 heroku postgresSQL db 中提取数据。我正在尝试使用 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 })的props，或者使用(prop)并通过props.data访问数据。

标签： javascript next.js javascript-objects prisma getstaticprops

【解决方案1】：

你应该已经解构了道具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[]
}

【讨论】：