时间戳

首页 > 解决方案 > 在页面索引更改后获取数据

reactjs - 在页面索引更改后获取数据

问题描述

我从 api 获取数据并通过 pageIndex = 1 并获得 10 个第一个项目和 pageIndex 2 获得第二个 10 个项目，依此类推，然后当用户单击 nextPage/prevPage 时，PageIndex 将增加/减少，我想再次获取数据，我应该如何在反应中做到这一点：

const [data, setData] = useState([])
const [index, setActiveStep] = useState(0);

useEffect(() => {
     const getData = async () => {
     const dataFromServer = await fetchData()
  setData(dataFromServer )
} 
getData() }, [])

// Pagination
const forwardButton = () => { 
  setActiveStep((prevActiveStep) => prevActiveStep - 1); 
}; 

// Pagination
const previousButton = () => { 
  setActiveStep((prevActiveStep) =>  prevActiveStep + 1 ); 
}; 

const fetchData = async () => {
    const res = await fetch(`api?page=${index + 1}`)
    const data = await res.json()
    TOTAL_ITEMS = data.totalItems
    return data;
}

标签： reactjs

解决方案

修改索引时将触发 useEffect。当用户单击 prev 或 ext 按钮时，您可以获取数据

useEffect(() => {
     const getData = async () => {
        const dataFromServer = await fetchData();
        setData(dataFromServer);
      } 
     getData();
}, [index])

推荐阅读