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

【问题标题】：How to render item of each page?如何渲染每个页面的项目？
【发布时间】：2021-04-18 03:41:52
【问题描述】：

我正在创建全栈应用程序。而且，我有后端分页数据，如下所示： { “页码”：1， “页面大小”：12， “总记录”：172， “数据”： [...] }

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

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 库

【问题讨论】：

标签： reactjs react-hooks

【解决方案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)
    }
};

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

【讨论】：