Question

我想调用显示100行的API，当用户单击“下一步”按钮时，它将加载下100行。当用户单击“下一个”或“上一个”按钮时，我想将页码传递给API URL链接。我有两个问题。

当用户单击下一步按钮时，如何将页码传递到API URL并加载下一页。
如何记住当前页面并根据用户的点击加载正确的下一页或上一页。

也许我正在尝试的分页解决方案不正确，任何其他建议都很好。谢谢

import React , {Component} from 'react';

lass RankingTable extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoading : true ,
            data : [] ,
            currentPage: 1 ,
        };
        this.onSort = this.onSort.bind(this);
    }

    pageHandler = (e) => {
        const nextPage = this.state.currentPage + 1;
        this.setState({currentPage: nextPage})
    };

    componentDidMount() {
        this.getData = async () => {
            const data = [];
            const livePrices = {
                url : `${process.env.REACT_APP_DEV_API}assets?page=${this.state.currentPage}` ,
                json : true
            };
            try {
                rp(livePrices , (error , resp) => {
                    const rawData = resp.body;
                    rawData.map((asset) => {
                        const assetRank = asset.asset_rank;
                        const assetIcon = asset.icon;
                        const assetName = asset.name;
                        data.push({
                            assetRank ,
                            assetIcon ,
                            assetName ,

                        })
                    });
                    this.setState({data : data , isLoading : false});
                });
            } catch (error) {
                console.log(error)
            }
        };
        this.getData()
    }


    render() {
        const {isLoading , value , data} = this.state;
        const RankingData = < Ranking data={data}/>;

        return (
            <Fragment>
                <div className="pagination_container">
                   <button onClick={this.pageHandler}> Next </button>
                   <button onClick={this.pageHandler}> Prev </button>
                </div>
                {RankingData}
            </Fragment>


        );
    }
}

export default RankingTable;

基于下一个和上一个按钮的单击来预期分页。

如何将页码作为参数传递给API url onClick以在ComponentDidMount

0 个答案: