0

typescript と next.js を初めて使用します。Vercel を使用して、Prisma を使用して heroku postgresSQL データベースからデータを取得する Next.js Web アプリケーションをデプロイしています。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}
  ]
 }

私のプロット関数はオブジェクトの配列を必要としますが、datagetStaticProps を使用して Home コンポーネントに渡した後data、それらの JS Curley 中かっこで「ラップ」され、私はそれを望んでいません。この動作を修正する理由と方法を誰かが理解するのを手伝ってくれますか? 両方の console.log リターンで typeof データを使用するobject

4

1 に答える 1