如何使用react-paginate使用react钩子转换基于类的react组件

问题描述

---

任何人都可以建议如何根据反应转移下课吗？ 官方的react-paginate（https://www.npmjs.com/package/react-paginate）网站上没有使用反应挂钩的文档。感谢你的帮助。

import React,{Component} from 'react'
import axios from 'axios'
import ReactPaginate from 'react-paginate';
import './App.css'

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            offset: 0,data: [],perPage: 10,currentPage: 0
        };
        this.handlePageClick = this
            .handlePageClick
            .bind(this);
    }
    receivedData() {
        axios
            .get(`https://jsonplaceholder.typicode.com/photos`)
            .then(res => {

                const data = res.data;
                const slice = data.slice(this.state.offset,this.state.offset + this.state.perPage)
                const postData = slice.map(pd => <React.Fragment>
                    <p>{pd.title}</p>
                    <img src={pd.thumbnailUrl} alt=""/>
                </React.Fragment>)

                this.setState({
                    pageCount: Math.ceil(data.length / this.state.perPage),postData
                })
            });
    }
    handlePageClick = (e) => {
        const selectedPage = e.selected;
        const offset = selectedPage * this.state.perPage;

        this.setState({
            currentPage: selectedPage,offset: offset
        },() => {
            this.receivedData()
        });

    };

    componentDidMount() {
        this.receivedData()
    }
    render() {
        return (
            <div>
                {this.state.postData}
                <ReactPaginate
                    prevIoUsLabel={"prev"}
                    nextLabel={"next"}
                    breakLabel={"..."}
                    breakClassName={"break-me"}
                    pageCount={this.state.pageCount}
                    marginPagesdisplayed={2}
                    pageRangedisplayed={5}
                    onPageChange={this.handlePageClick}
                    containerClassName={"pagination"}
                    subContainerClassName={"pages pagination"}
                    activeClassName={"active"}/>
            </div>

        )
    }
}

解决方法

希望这会有所帮助，仅供参考。

const App = () => {
    const [offset,setOffset] = React.useState(0);
    **// Define rest of your state values here**


    **// to be use in receivedData**
    const [pageCount,setPageCount] = React.useState(null);

    **// use this to store title,thumbnailUrl** 
    const [postData,setPostData] = React.useState({})


    const receivedData =  ()=> {
        axios
            .get(`https://jsonplaceholder.typicode.com/photos`)
            .then(res => {

                const data = res.data;
                const slice = data.slice(offset,offset + perPage);


                **//Better to store the required values for postData in state and then render the JSX**

                // const postData = slice.map(pd => <React.Fragment>
                //  <p>{pd.title}</p>
                //  <img src={pd.thumbnailUrl} alt="" />
                // </React.Fragment>)

                // this.setState({
                //  pageCount: Math.ceil(data.length / this.state.perPage),//  postData
                // })
                
            setPageCount(Math.ceil(data.length / perPage));
            **// use setPostData to store tile,thumnail here**
                
            });
    }


    const handlePageClick = (e) => {
        const selectedPage = e.selected;
        const offset = selectedPage * perPage;

        setCurrentPage(selectedPage);
        setOffset(offset);
        receivedData();

    };

    useEffect(() => {
        receivedData();
    },[]);

    return (
        <div>
            {/* {postData} */}


        // Re-write JSX and display values from postData.


            <ReactPaginate
                previousLabel={"prev"}
                nextLabel={"next"}
                breakLabel={"..."}
                breakClassName={"break-me"}
                pageCount={pageCount}
                marginPagesDisplayed={2}
                pageRangeDisplayed={5}
                onPageChange={this.handlePageClick}
                containerClassName={"pagination"}
                subContainerClassName={"pages pagination"}
                activeClassName={"active"} />
        </div>

    )
}