javascript - 反应:分页无法正常工作
问题描述
我是 ReactJS 的新手,我正在研究分页。我为分页制定了逻辑,它与下一个按钮一起工作正常。我正在通过 API 获取服务器数据,并且 API 内置在环回中。我在分页中想要什么,如果用户在页面上2
,它将显示第 2 页数据,如果用户想要下一步或3
在分页中单击,它将移至第 3 页并加载第 3 页数据。根据我的逻辑,它可以正常工作,它与我之前提到的相同,但是当用户单击上一个按钮或从按钮 3 到按钮 2 时,它不会加载上一页数据。当用户单击上一个按钮时,它会加载下一页数据。我希望当用户单击按钮 2 时,它将加载第 2 页数据而不是下一页数据。
代码
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
Item: 5,
skip: 0
}
this.handleClick = this.handleClick.bind(this);
}
urlParams() {
return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
}
handleClick() {
this.setState({skip: this.state.skip + 1})
}
render() {
return (
<div>
<a href={this.urlParams()}>Example link</a>
<pre>{this.urlParams()}</pre>
<button onClick={this.handleClick}>Change link</button>
</div>
)
}
}
ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))
解决方案
每当您单击任何按钮时, this.state.skip 将始终添加 10。因此,当您从第3页单击按钮2时,它会加载第4页数据。
如果你想得到正确的数据。您应该像这样编辑函数btnClick。
btnClick(page) {
const userId=this.state.userId;
const skip=this.state.skip;
this.setState({
userId,
skip:(page - 1) * 10
},()=> this.getData())
}
const UserIdComponent=props=>{
return(
<button
onClick={() => props.onClick(props.name)}
value={props.name}>
{props.name}
</button>
)
}
推荐阅读
- javascript - 如何检查表单是否被“攻击”
- sql - SQL显示不同日期的值
- javascript - 在 StackBlitz 中使用几个 JS 文件和一个简单的 JS 项目
- hadoop - 是否可以使用 webhdfs 在请求 url 中传递多个参数?
- php - PHP比较文件时间戳以检查它是否应该被覆盖
- r - R Studio 中的 XGBoost 错误(“‘数据’具有类‘字符’和长度......”)
- javascript - 如何将本地图像显示到控制台?
- opencv - OpenCV - 在阈值化后获得椭圆形的平滑部分
- ubuntu - 无法从浏览器 ERR_CONNECTION_TIMED_OUT 访问 Jenkins
- database - 使用 Laravel 在两个数据库中创建表 XX LIKE YY