我正在使用 NextJS Typescript 和 MongoDB 作为数据库构建一个博客。
我正在尝试使用 getServerSideProps 获取数据以填充 [slug].tsx 页面(带有 slug 查询的动态路由),但由于某种原因,该页面 确实填充了单个特定帖子的数据但不适用于任何其他帖子(该页面会减慢冻结速度,尽管
useEffect
确认道具已从服务器传递并设置在 post
和 author
状态中)。
我不会使用
getStatisProps
因为修改会定期进行。
帖子之间没有任何区别。
export const getServerSideProps: GetServerSideProps = async ({params}: any) => {
const clientPromise = await getClient()
const post = await clientPromise
.db("my-db")
.collection("articles")
.findOne({ 'titleSlug': params.slug }, {projection: { "_id": 0 }})
if (post) {
const author = await clientPromise
.db("my-db")
.collection("auteurs")
.findOne({ 'slug': post.authorSlug }, {projection: { "_id": 0 }})
await clientPromise.close()
return { props: { post: post, author: author}}
}
await clientPromise.close()
return { props: { error: true }}
}
function Post (props: InferGetServerSidePropsType<typeof getServerSideProps>) {
const [post, setPost] = React.useState<any>(null)
const [author, setAuthor] = React.useState<any>(null)
React.useEffect(() => {
console.log(props)
if (props.post) {
setPost(props.post)
}
if (props.author ) {
setAuthor(props.author)
}
}, [props])
if (!props || !post || !author) { return null }
return (
<>
<main className={"main"}>
<Container maxWidth={"md"} sx={{ py: 4 }}>
<PostView post={post} author={author} />
</Container>
</main>
</>
)
}
export default Post
{
"@types/node": "18.15.9",
"@types/react": "18.0.29",
"@types/react-dom": "18.0.11",
"eslint": "8.36.0",
"eslint-config-next": "13.2.4",
"mongodb": "^4.8.0",
"next": "13.2.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "5.0.2"
}