手机传奇手游发布网站,天津建设工程信息网专家库官网,装修房子的效果图 三室二厅二卫,海阳网站建设有个react项目是自己写的mock后端api#xff0c;使用的是json文件模拟DB, slice函数模拟分页#xff0c;但是在实际分页时#xff0c;发现了分页不准的问题#xff0c;现象如下#xff1a;
当pageSize为5的时候#xff08;共16条数据#xff09;#xff0c;总共分4页使用的是json文件模拟DB, slice函数模拟分页但是在实际分页时发现了分页不准的问题现象如下
当pageSize为5的时候共16条数据总共分4页但是在前端切换分页按钮时有如下问题
1. 跳到第二页 api返回11条数据
2. 跳到第三页时 api返回6条数据 这明显有问题按道理说应该是前三页应该每页都返回5条数据才对
到底哪里出了问题呢于是开始对api服务端代码开启debug调试在可疑处打断点 发现入参pageNumber和pageSize是字符串类型不是数字类型 严重怀疑是数据类型错误造成的问题所以继续往下调试 可以看到第135行的计算结果是16这个明显不对让我们来分析一下其中的原因
startIndex是数字 5
pageSize:是字符串5
baseData.length(baseData中有16条数据): 16
那么计算一下 5 5的结果是多少 可看到 5 5 55, 所以在取最小值时 Math.min(55, 16), 得出的结果就是16。
所以slice分页的起始索引就变成了slice(5, 16) , 也就是11条数据
然而我们期待的应该是两个数字类型的相加 55 10 那Math.min(10,16)的结果就是10这才是我们想要的结果。
所以到此为止真相已经清楚了 就是入参数据类型的错误造成了分页不准的问题。
解决办法很简单通过parseInt函数提前把入参从String类型转化成整数类型 pageNumber parseInt(pageNumber) pageSize parseInt(pageSize) 此时问题解决 总结在Javascript涉及到数字运算时一定要特别小心一定确保所有参与运算的元素提前转化成数字类型如果有字符串类型混入其中就会造成计算结果错误的严重问题。
