TypeScript+NextJS 解构

Posted

技术标签:

【中文标题】TypeScript+NextJS 解构【英文标题】:TypeScript+NextJS destructuring 【发布时间】:2021-12-23 09:41:51 【问题描述】:

我有来自 postgresql 的对象:

需要像这样在 NextJS 组件上获取 id、名称和内容:

export async function getServerSideProps() 
  const data = await prisma.note.findFirst()
  return 
    props: 
      userNote: data,
    ,
  

interface INote 
  id: number
  name: string
  content: string


const Home = ( name, content, id : INote) => 
  console.log(name)
  return <div>hello world</div>

但我没有定义。怎么了?

【问题讨论】:

你是如何渲染这个Home组件的? "Home" 是 pages/index.tsx 中的主要组件 我可以得到这个对象 if = (userNote: any) => ... 但这是错误的 【参考方案1】:

问题是你在 Home 组件中的 props 不是


  id: number
  name: string
  content: string

但实际上,


 userNote: 
  id: number
  name: string
  content: string
 

您需要更改解构和类型:

const Home = ( userNote:  name, content, id  :  userNote: INote ) => 

或者您可以更改您的 getServerSideProps:

export async function getServerSideProps() 
  const data = await prisma.note.findFirst()
  return 
    props: data,
  


根据我的经验,采用第一种方法并将其更改为:

export async function getServerSideProps() 
  const data =  id: 1, name: 'test', content: 'content' 
  return 
    props: 
      userNote: data,
    ,
  


interface INote 
  id: number
  name: string
  content: string


interface HomeProps 
   userNote: INote


const Home = ( userNote:  name, content, id  : HomeProps) => 
  console.log(name)
  return <div>hello world</div>


export default Home

【讨论】:

谢谢,现在可以使用了!

以上是关于TypeScript+NextJS 解构的主要内容,如果未能解决你的问题,请参考以下文章

TypeScript 使用 ES6 解构骚操作

NextJS/Typescript/Apollo 错误;类型上不存在属性

8TypeScript-解构赋值

NextJS _app.tsx Component 和 pageProps 应该是啥 TypeScript 类型?

TypeScript 解构和展开

TypeScript 解构