如何渲染每个页面的项目？

Question

我正在创建全栈应用程序。并且，我有后端的分页数据，像这样：{ "pageNumber"：1，"pageSize"：12，"totalRecords"：172，" data "：... }

现在，我还需要在前面使用分页来获取它们。但是，我不擅长react，也不知道如何渲染。那么，我想知道如何显示每个页面的所有项目？

function ProductPage() {
    const [product, setProduct] = useState(null)

    const [currentPage, setCurrentPage] = useState(0);
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
          const response = await getProducts()
          setProduct(response.data.data)
        }
    
        fetchData();
    }, []);

    useEffect(() => {
        const fetchData = async () => {
            const response = await getProducts()

            setData(response.data)
            console.log(response.data)
        }

        fetchData()
    }, [])

    function handlePageClick({ selected: selectedPage }) {
        setCurrentPage(selectedPage);
    }

    const pageCount = Math.ceil(data.totalRecords / data.pageSize)

    return (
        <div className="content-inner">
            <SortPopup
                items = { sortItems }
            />

            <div className="list__item">
                {
                    product ? product.map(item => 
                        <ProductItem
                            key={ item.id }
                            image={ item.thumbnail }
                            title={ item.label }
                            description={ item.description }
                            price={ item.price }
                            discount="-10%"
                            link={ item.id }
                        />
                    ) : 
                    Array(12)
                    .fill(0)
                    .map((_, index) => (<Loader key={index} />))
                }
            </div>
            
            <ReactPaginate
                previousLabel={"← Previous"}
                nextLabel={"Next →"}
                pageCount={ pageCount }
                onPageChange={ handlePageClick }
                containerClassName={ "pagination" }
                previousLinkClassName={ "pagination__link" }
                nextLinkClassName={ "pagination__link" }
                disabledClassName={ "pagination__link--disabled" }
                activeClassName={ "pagination__link--active" }
            />
        </div>
    )
}

顺便说一句，我使用的是react-paginate库

Answer 1

您只需要将来自handlePageClick的值传递给您的api并更新产品状态。

const handlePageClick = (val) => {
    fetchPaginatedData({
        pageNumber: val.selected + 1
    });
};


const getProducts = (query) => {
    fetch(url + query, {
        method: 'GET',
        body: JSON.stringify(data)
    });
    return response.json();
}
}


//here you can write your api query to get data from backend
const fetchPaginatedData = (query) => {
    const fetchData = async (query) => {

        //where get products is used to fetch products data 
        const response = await getProducts(query)
        setProduct(response.data.data)
    }
};

我已经尝试在不使用任何后端的情况下为您的问题创建解决方案，可供任何参考

​

​