Reactjs React with REST API中的分页

我最近在学习React，我想知道如何在React中分页。 我实现了一个简单的REST API，它可以从数据库中获取数据并返回JSON文件，如下所示：

count: total number of data
start: starting index of data
limit: how many data per page
next: api to fetch next page of data
previous: api to fetch previous page of data

{
    "count": 17,
    "start": 1
    "limit": 5,
    "next": "/User/page?start=6&limit=5",
    "previous": "",
    "results": [
        {
            "email": "",
            "first_name": "",
            "id": ,
            "last_name": "",
            "password": "",
        },
        ...
    ], 
}

<Route path="/users/page/:pageNumber" component={Users} />

我想，所以我想在每页的底部添加两个链接，这样我可以前进和后退

我当前的React代码如下所示，我可以从第一页获取数据，但我不确定如何进入下一页

class Users extends Component{
    state={
        count:undefined,
        limit:undefined,
        next:'',
        previous:'',
        start:undefined,
        results:[]
    }
    componentDidMount(){
        Axios.get('http://127.0.0.1:5000/User/page').then(response=>{
            this.setState({
                results:response.data.results,
                count:response.data.count,
                limit:response.data.limit,
                next:response.data.next,
                previous:response.data.previous,
                start:response.data.start
            })

        })
    }

    render(){
        console.log(this.state.previous)
        console.log(this.state.next)
        return (
            <div>
                {this.state.results.map((user)=>{return <User key={user.id} user={user}/>})}

                //I know this wont work
                //<a href={this.state.previous} style={{color:'#4c4c4c'}}>prev</a>
                //<br/>
                //<a href={this.state.next} style={{color:'#4c4c4c'}}>next</a>
            </div>

        )
    }
}

类用户扩展组件{
陈述={
计数：未定义，
限制：未定义，
下一步：''，
以前的：''，
开始：未定义，
结果：[]
}
componentDidMount（）{
Axios.get（）http://127.0.0.1:5000/User/page）。然后（响应=>{
这是我的国家({
结果：响应、数据、结果，
计数：response.data.count，
限制：response.data.limit，
下一步：response.data.next，
先前：response.data.previous，
开始：response.data.start
})
})
}
render（）{
console.log（this.state.previous）
console.log（this.state.next）
返回(
{this.state.results.map（（用户）=>{return}）}
//我知道这行不通
//
//

//
)
}
}

您希望页面上显示的内容反映地址栏中的URL，反之亦然。因此，我们将使用URL中的页码作为“唯一真实来源”，而不是使用本地组件状态来控制页码

路由器 在

react router dom

中声明路由时，可以使用冒号

：

后跟变量名来匹配动态变量。此变量将通过

props.match.params

或

useParams

钩子对组件可用

在本例中，我们需要一个用于

pageNumber

的变量。主要路线如下所示：

count: total number of data
start: starting index of data
limit: how many data per page
next: api to fetch next page of data
previous: api to fetch previous page of data

{
    "count": 17,
    "start": 1
    "limit": 5,
    "next": "/User/page?start=6&limit=5",
    "previous": "",
    "results": [
        {
            "email": "",
            "first_name": "",
            "id": ,
            "last_name": "",
            "password": "",
        },
        ...
    ], 
}

<Route path="/users/page/:pageNumber" component={Users} />

组件 我们的

用户

组件可以通过查看

props.match.params.pageNumber

中的

pageNumber

或

useParams

钩子来确定要呈现哪个页面。URL参数总是一个

字符串

，因此在任何数学运算中使用它之前，我们需要使用

parseInt

当我们在第一页时，没有

pageNumber

param，因此每当页码为空时，我们需要默认设置为

1

const params = useParams();
const pageNumber = params.pageNumber ? parseInt(params.pageNumber, 10) : 1;

您可以将API调用基于

页码

。您可以使用字符串文字语法来组成正确的URL字符串

axios.get(`http://127.0.0.1:5000/User/page?start=${1 + limit * (pageNumber - 1)}&limit=${limit}`);

Previous

和

Next

链接应该有条件地显示，因为第1页没有上一页。您可以使用API调用的结果来查看是否有下一页

const hasPrevious = pageNumber > 1;
const hasNext = !!state.next;

我们使用

react-router-dom

中的

Link

组件实现这些链接。

to

参数采用我们想要链接到的路径。我们将对当前的

页码进行加减

<div>
   {hasPrevious && (
        <Link to={`/users/page/${pageNumber - 1}`}>Previous</Link>
    )}
    {hasNext && (
       <Link to={`/users/page/${pageNumber + 1}`}>Next</Link>
    )}
</div>


{hasPrevious&&(
以前的
)}
{hasNext&&(
下一个
)}

显然，我没有访问您的API的权限，但我必须确保分页正确

有关使用的特定组件的详细信息，请务必查看。
我找到了一个解决方案，即添加两个按钮和两个onClick事件，该事件将运行setState以刷新状态中的内容。即使内容已更改，浏览器中的链接也没有更改，链接将始终保持不变，那么如何解决这个问题呢？这取决于您使用什么来控制路由。如果您使用
react router
您将替换
我使用react route dom，它看起来像是，我如何在这个路由路径之后添加参数？与page num一样，是否可以使用“user/path/”来创建用户？