在页面请求的时候我们都知道先去的时候就会先执行管道函数,来请求数据,当然它是由页面跳转才会执行的,也就是你访问某个路由的时候执行。那么这个时候就会渠道问题,开始的时候自己也是比较愚笨没有仔细看官方文档,想着在页面中用onChange
和axios
直接搭配使用请求数据,但是也是不知道为什么在server层就是接收不到传来的参数,也是奇怪。自己的server使用的是egg.js利用this.ctx来获取,也是详细查看了相关的api,但是获取不到,求告知。
后面就去研究next.js的官网,其中就是这样一段话
但是你会发现,其实并不会刷新页面,这也是因为next.js的特性
搭配onChange来执行请求,
const onChange = (e) => {
setPage(e);
router.push({ path: "/", query: { page: e } });
};
然后在getServerSideProps函数中我们只需要去接收传过来的参数就可以
export async function getServerSideProps(context) {
const options = {
page: 1,
limit: 10,
};
if (context.query.page) {
options.page = Number(context.query.page);
}
const res = await axios({ url: servicePath.article, data: options });
const data = res?.data;
return {
props: {
data,
},
};
}
在server层我们就用this.ctx.request.body
来接收参数。
这也是简单记录一下自己,在写分页请求的时候遇到的问题。
本文连接:点击
博主个人小博客嘿嘿