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 解构的主要内容,如果未能解决你的问题,请参考以下文章
NextJS/Typescript/Apollo 错误;类型上不存在属性