接触react不久，用函数组件写项目，分页老是出现问题，要么就是点击分页后数据就返回到没查询之前，如果在非第一页查询返回一条数据的那个条数就会变成负数，或者查询后点击第一页又会返回没有查询之前的数据，我觉得是我的逻辑有问题但是自己又想不懂，框架也没学精，百度都搜烂了都没找到解决方法
需求：
1，三个组件，一个父两个子，然后父组件是组页面，子组件一个是搜索表单，一个是表格组件用来展示数据的
2，分页放在了父组件里面，但是搜索得来的数据展示分页有问题，我的代码如下：
父组件：
const TableList = () => {
// 存储要展示的数据
const [ nfcInfo, setNfcInfo ] = useState([])
// 接收搜索组件传过来的表单数据
const [sMessage, setMessage] = useState({})
// 总条数
const [totals, setTotals] = useState(50);
// 获取查询组件传过来的值
const getCMsg = (msg) => {
// console.log('这是S组件传过来的', msg)
setMessage(msg)
getNFCInfo(1,50, msg)
}
// 获取nfc的数据
const getNFCInfo = async (page, limit, sMessage) => {
console.log('这里是nfc的数据',sMessage)
if(sMessage){
await disinNfcList({
page: page,
limit: limit,
nfc: sMessage.nfc,
status: sMessage.status,
belongHosName: sMessage.belongHosName,
startTime: sMessage.startTime,
endTime: sMessage.endTime
}).then(res => {
// 获取返回的数据
setNfcInfo(res.data)
// 获取总条数
setTotals(res.count)
})
}
else {
await disinNfcList({
page: page,
limit: limit,
}).then(res => {
// 获取返回的数据
setNfcInfo(res.data)
// 获取总条数
setTotals(res.count)
})
}
}
// 控制分页
const showData = (current, pageSize) => {
sMessage ? getNFCInfo(current, pageSize, sMessage) : getNFCInfo(current, pageSize)
}
useEffect(() => {
sMessage ? getNFCInfo(1,50, sMessage):getNFCInfo(1,50)
// getNFCInfo(1,50)
},[])
useEffect(() => {
setTotals(totals)
}, [totals])
return (
<PageHeaderWrapper>
<IntlProvider value={getNewLocal()}>
{/* 查询部分 */}
<Card className={styles.Card_Styles_One}>
<SearchFrom getFmsg={getCMsg}/>
</Card>
<Card className={styles.CardStyles}>
{/* 表格部分 */}
<div className={styles.divStyle}>
<DiyTable data={nfcInfo}/>
</div>
{/* 底部分页 */}
<div className={styles.divStyle}
<Pagination size="small" total={totals}
showSizeChanger
showTotal={(total, range) => locale == 'en'?`${range[0]}-${range[1]} of ${total} items`: `第 ${range[0]}-${range[1]} 条/总共 ${total} 条`}
defaultPageSize={50}
defaultCurrent={1}
pageSizeOptions={[50,80,100,120]}
onChange={showData}
onShowSizeChange={ppt}
className={styles.Pag_style}
/>
</div>
</Card>
</IntlProvider>
</PageHeaderWrapper>
);
};
export default TableList;
搜索表单， 父组件相关的就这一部分内容，就是表单完成后调用父组件的方法把值传过去
const onFinish = (values) => {
props.getFmsg({
nfc: values.nfc,
status: values.status,
belongHosName: values.belongHosName,
startTime: st,
endTime: et,
msg: true
})
};
数展示页面就是一自己自定义的table，就负责接收数据然后展示，
const DiyTable = props => {
const { data } = props
console.log('这里是父组件传过来的数据data',data)
if(data){
return (
<div style={{width:"100%"}}>
<table className={styles.tableStyle}>
<tbody>
{/* 表格部分 */}
</tbody>
</table>
</div>
};
export default DiyTable;
实在不知道哪里有问题，麻烦各位网友帮帮忙看一下谢谢
