NextJS+Antd实现分页功能

简单记录一下个人博客文章列表页面的分页功能实现

使用antd的List组件显示数据，Pagination组件用作分页。

数据获取则使用nextjs服务端渲染的getServerSideprops()

分页请求使用nextjs的router.push(url,as,options)

具体流程为：

        页面初始化：getServerSideprops()初始化页面（获取第一页数据）

        ->分页组件发送page和pageSize，请求当页数据：这里使用router.push()以上下文的形式发送给getServerSideprops(),然后得到数据，反复循环。

代码记录：

const articleList = (props) => {
    const [data,setData] = useState(props.data) // 列表数据state
    return (
        <List className='container-articlelist'
                        header={
                            <div className='lastest-article'>文章列表</div>
                        }
                        itemLayout='vertical'
                        dataSource={data}
                        split={true}
                        renderItem={(item) => {
                            return (
                                <List.Item>省略</List.Item>
                            )
                        }}
                    />
                    <Pagination
                        className='pagination'
                        simple
                        current={current}
                        defaultCurrent={1}
                        hideOnSinglePage={true}
                        total={props.results.count[0].count}
                        pageSize={pageSize}
                        onChange={(page, pageSize) => {
                            setCurrent(page)
                            router.push({
                                pathname: '/',
                                query: {
                                    page: page,
                                    pageSize: pageSize,
                                    articleTypeId: props.articleTypeId
                                }
                            }, '/', // router设置 不设置此项 query参数会显示再地址栏
                            {
                                scroll: false,// router设置 使push之后页面不会回到顶端
                            })
                        }}
                    />
    )
}
export default articleList
export async function getServerSideProps(context) {
    const res = await axios({
        method: 'post',
        url: '........',
        data: {
            startNumber: (page - 1) * pageSize,// 计算启示下标
            pageSize
        }
    })
    const data= res.data.results
    if (!data) {
        return {
            notFound: true
        }
    }
    return {
        props: data
    }

}