我一直在使用'react,next,mobx'。 我的ssr动态页面存在一些问题。
我对邮递员测试了SSR后,结果没有错误。 在实体代码的下面,邮递员给了我。
在div标签的''中,这是我要放入数据的部分
<main class="ant-layout-content site-layout-background"
style="padding:24px;margin:0;min-height:280px">
<div>
<!-- -->
</div>
<div>
<!-- -->
</div>
<div>
<!-- -->
</div><a href="/edit?id=3"><button>Edit</button></a><button>delete</button>
</main>
...
<script src="/_next/static/chunks/react-refresh.js?ts=1600821412152"></script>
<script id="__NEXT_DATA__" type="application/json">
{"props":{"pageProps":{"data":{"id":3,"category":"2","title":"ssr test","content":"\u003cp\u003essr test\u003c/p\u003e\n","createdAt":"2020-09-22T13:58:26.000Z","updatedAt":"2020-09-22T13:58:26.000Z","deletedAt":null}},"__N_SSP":true},"page":"/posts/[id]","query":{"id":"3"},"buildId":"development","isFallback":false,"gssp":true}
</script>
下面,我已经在组件中进行了编码。
const Post = () => {
const router = useRouter();
const { id } = router.query;
const onClickDelete = useCallback(() => {
editPost.postD(id);
}, [])
return useObserver(() => (
<AppLayout>
<div> {toJS(dynamicPost.post?.createdAt)} </div>
<div> {toJS(dynamicPost.post?.title)} </div>
<div> {ReactHtmlParser(toJS(dynamicPost.post?.content))} </div>
<Link href={{
pathname: '/edit',
query: { id:id },
}}><a><button>Edit</button></a></Link>
<button onClick={onClickDelete}>delete</button>
</AppLayout>
));
};
export async function getServerSideProps(context) {
const res = await fetch(`${backUrl}/errors/react/dpost?key=${context.query.id}`)
const data = await res.json()
return { props: { data } }
}