Soy nuevo en trabajar con mecanografiado y next.js. Estoy usando Vercel para implementar una aplicación web Next.js que extraerá datos de una base de datos heroku postgresSQL usando Prisma. Estoy tratando de representar algunos datos en la página usando observable/d3, usando getStaticProps para obtener los datos y luego pasarlos al componente de la página de inicio.
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() ) }, []) ... }El primer inicio de sesión de la consola en getStaticProps devuelve los datos en mi formato deseado, una matriz de objetos:
[ {letter: 'A', frequency: 0.0123} ... {letter: 'Z', frequency: 0.00234} ] Después de pasar los datos al componente Inicio, data se envuelven en un objeto y se ven así:
{ data: [ {letter: 'A', frequency: 0.0123} ... {letter: 'Z', frequency: 0.00234} ] } Mi función de trazado quiere una matriz de objetos, pero después de pasar data usando getStaticProps al componente Inicio, data se 'envuelven' en esas llaves JS Curley y no quiero eso. ¿Alguien puede ayudarme a entender por qué y cómo corregir este comportamiento? Usar typeof data en ambos console.log devuelve object
Deberías haber desestructurado los accesorios Home({ data }) en lugar de 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[] }