优化分页组件：高效渲染数据数组

假设您一次获得了所有数据（例如，从API提取），并且只需要呈现其中的一部分，则可以简单地动态地对源数据数组进行切片，从而在组件状态下跟踪当前页面（例如，页面长度为5项）
）：

const [data, setData] = useState([]),
[page, setPage] = useState(0),
maxPage = Math.ceil(data.length/5),
OnNextPage= () => setPage((page+1)%maxPage),
OnPrevPage= () => setPage((page+5-1)%maxPage)

{
data
.slice(page*5,5*(page+1))
.map((content,key) => (

{content}

))
}



您可能想查看以下演示以获得完整的示例（我猜您一直在使用material-ui来设置组件样式）：

//dependencies
const { render } = ReactDOM,
{ useState, useEffect } = React,
{ Button, Paper, Grid, LinearProgress } = MaterialUI,
{ get } = axios
//paginated output, by default 5 items per page
const paginatedBoard = () => {
//initiate state and event handlers
const [data, setData] = useState([]),
[page, setPage] = useState(0),
maxPage = Math.ceil(data.length/5),
OnNextPage= () => setPage((page+1)%maxPage),
OnPrevPage= () => setPage((page+5-1)%maxPage)
//fetch src data on component render
useEffect(() => get('https://api.nytimes.com/svc/topstories/v2/science.json?api-key=k9DaUAw5wUAei4J5WXRsy3EL988RADE3').then(({data:{results}}) => setData(results.map(({abstract}) => abstract))),[])
//return components body
return data.length ?
(