前端react 开发 图书列表分页

我最近刚开始使用react 进行 实际的企业项目开发

网文系统

我平常使用vue多 

最近突然猛地一用 react 说实话 多少有点不熟练 所以我现在开始一步一步总结

有一个列表的功能

显示一些图书

大概是这样 目前有一个列表 对接一个接口 然后 接上分页 功能

至于说样式 就慢慢写了

我直接上整个代码了 

import { Button, Card, Space, Image, Pagination, Modal } from 'antd'
import React, { useEffect, useState } from 'react'
import {http// , NumberInputChange 
} from '@/utils'import "./index.scss"
import Operation from 'antd/es/transfer/operation'const BookList = () => {const [list, setBookList] = useState([])const [pageinfo, setPageInfo] = useState({currentPage: 1,pageSize: 10,total: 0})useEffect(() => {getlist()}, [pageinfo.currentPage, pageinfo.pageSize]) // 添加依赖，当const fetchUserList = async () => {return http.post('/api/Works/GetNovelList', {pageIndex: pageinfo.currentPage, // 使用当前页码pageSize: pageinfo.pageSize,     // 使用当前页大小}).then(res => {console.log(res)return res// return res.body.list.map(item => ({//   label: item.groupAlarmName,//   value: item.id,// }))})}const getlist = async () => {const res = await fetchUserList()console.log(res, "获取当前的结果")if (res.code == 200) {setBookList(res.data.infos)setPageInfo(prev => ({...prev,total: res.data.totalCount}))} else {}}const handleBookAction = (e, name) => {console.log(e, name)}// 页码改变const handlePageChange = (page, pageSize) => {console.log('页码改变:', page, '页大小:', pageSize)setPageInfo(prev => ({...prev,currentPage: page,pageSize: pageSize}))// 不要在这里手动调用 getlist()，useEffect 会自动触发}// 页大小改变const handleSizeChange = (current, size) => {console.log('页大小改变:', '当前页:', current, '新大小:', size)setPageInfo(prev => ({...prev,currentPage: 1, // 重要：改变页大小时回到第一页pageSize: size}))}const [isModalOpen, setIsModalOpen] = useState(false)const handleOk = () => {alert("我点击了确定按钮")setIsModalOpen(false)}const handleCancel = () => {setIsModalOpen(false)}const openModal = () => {setIsModalOpen(true)}return (<div style={{ padding: '20px' }}><Card size="small" title="我的作品" extra={<Button onClick={openModal} type='primary'>添加新书</Button>}><div className='book-container'>{list.map((item) => {return <Card key={item.novelID} size='small' style={{ marginBottom: '16px' }} actions={[<Button type="link" onClick={() => handleBookAction(item, 'edit')}>编辑</Button>,<Button type="link" onClick={() => handleBookAction(item, 'chapters')}>章节管理</Button>,<Button type="link" onClick={() => handleBookAction(item, 'publish')}>发布</Button>]}>{/* {item.novelName} */}<div className='item'><Image src={item.coverUrl} width={150} style={{ objectFit: 'widthFix', borderRadius: '8px' }}></Image><div className='content'><div className='text'><div className='name'>{item.novelName}</div><div className='updated'>最近更新：{item.latestUpdateChapter}</div></div><div className='number'><div className='chanpterCount'>{item.totalChapterCount} 章 ｜ </div><div className='wordCount'>{item.totalWordCount} 字 ｜</div><div className=''>{item.isFinish == 0 ? '连载' : '未完结'}</div></div></div></div></Card>})}{/* <div className='item'></div> */}</div><div className='book-pagination'><PaginationshowSizeChangeronChange={handlePageChange}           // 页码改变onShowSizeChange={handleSizeChange}   // 页大小改变            pageSize={pageinfo.pageSize}total={pageinfo.total}current={pageinfo.currentPage}/></div></Card><Modaltitle="Basic Modal"closable={{ 'aria-label': 'Custom Close Button' }}open={isModalOpen}onOk={handleOk}onCancel={handleCancel}><p>Some contents...</p><p>Some contents...</p><p>Some contents...</p></Modal></div>)}export default BookList

当然这里面使用的是 函数组件 

现在写react 我感觉还是函数组件好使。简单 明了 类组件感觉不太好上手 需要详细查看才行

我这边使用的是ant-design 组件库 对这个react  框架 比较适配 

我这边遇到的问题是 分页组件这里

          <PaginationshowSizeChangeronChange={handlePageChange}           // 页码改变onShowSizeChange={handleSizeChange}   // 页大小改变            pageSize={pageinfo.pageSize}total={pageinfo.total}current={pageinfo.currentPage}/>

当然使用这个 ant-design，跟在vue中不太一样呢 用惯了vue 肯定不太习惯写react

  const [pageinfo, setPageInfo] = useState({currentPage: 1,pageSize: 10,total: 0})

在react 中 这个东西就跟vue 的双向绑定 就不太一样 写法 

 setPageInfo(prev => ({...prev,total: res.data.totalCount}))

赋值方法可定不一样

大家可以慢慢看 我来更新