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

Question

---

任何人都可以建议如何基于反应钩子转移下面的类吗？ 官方 react-paginate(https://www.npmjs.com/package/react-paginate) 网站上没有使用 react hooks 的文档。感谢你的帮助。

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>

        )
    }
}

Answer 1

希望对您有所帮助，这只是提供一个概述。

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>

    )
}