如何解决getStaticProps 返回空的道具对象
我正在尝试使用 getStaticProps (Next.js) 呈现登录页面,但它的行为不符合预期。这是我的组件:
import { GetStaticProps } from 'next'
const Brief = (props) => {
console.log(JSON.stringify(props)) // returns an empty object
return (
<>
{props[0]}
{props[1]}
{props[2]}
</>
)
}
export const getStaticProps: GetStaticProps = async (context) => {
const WhatIUse = <div className="WhatIUse">What I use</div>
const introduction = <div className="introduction">Introduction</div>
const ContactInfo = <div className="ContactInfo">Where to find me</div>
return {
props: [introduction,WhatIUse,ContactInfo]
}
}
export default Brief
日志语句显示“props”作为空对象返回,可能是什么问题?
解决方法
这种方法有一些问题。
首先,props
中返回的变量 getStaticProps
必须是一个 对象,其中包含可序列化为 JSON 的值。您正在尝试传递一个包含 JSX 元素(不可序列化)的 array。
其次,getStaticProps
用于获取数据以进行预渲染,您并不打算在那里生成 JSX,这将在组件本身中完成。
以下是基于您的初始代码的实际示例:
const Brief = (props) => {
console.log(props) // Will log props passed in `getStaticProps`
return (
<>
<div className="WhatIUse">{props.data[0]}</div>
<div className="introduction">{props.data[1]}</div>
<div className="ContactInfo">{props.data[2]}</div>
</>
)
}
export const getStaticProps: GetStaticProps = async (context) => {
const WhatIUse = 'What I use'
const introduction = 'Introduction'
const ContactInfo = 'Where to find me'
return {
props: {
data: [introduction,WhatIUse,ContactInfo]
}
}
}
export default Brief
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。