如何通过从页面移动到另一个页面来解决反应分页问题

问题描述

我设置了一个逻辑来使用我从端点 API 获取的数据在 react 中创建分页，其中包含我在此 UI 中显示的 5 个对象，然后我创建了一个我实现的函数 pageCount进入我的反应分页组件，当我点击移动到第二页时，它移动到最后一页，下一页，以前它们也不起作用。

我研究了很多来解决问题，但没有找到任何解决方案？

这个问题从何而来？

谢谢

function App() {
  
  //states
  const [yogaCourses,setYogaCourses] = useState([]);
  const [isLoading,setIsLoading] = useState(true);
  const [levels,setLevels] = useState([]);
  const [level,setLevel] = useState('');
  const [pageNumber,setPageNumber] = useState(0);

  //Paginate react 
  const coursePerPage = 2;

  // const PageVisited = numberPage * coursePerPage;
  const pageCount = Math.ceil(yogaCourses.length / coursePerPage);
  console.log(pageCount);

  //Track changes on each numberPage and display the data 
  useEffect(()=> {
    setYogaCourses(yogaCourses.slice(pageNumber * 2,(pageNumber + 1) * 2))
  },[pageNumber]);

  //To the next Page
  const pageChange = ({selected}) => {
    setPageNumber(selected);
  }

  //levelChangeHandler 
  const levelChangeHandler = ({value}) => {
      setLevel(value);
  }

  //Filter by Levels // stateless
  const filterLevels = (level) => {
    return yogaCourses.filter((singleLevel)=> level ? singleLevel.level === level : true);
  }

  //Function to fetch the data from the API
  const GetCourses = async () => {
    const response = await axios.get(url)
    const {data} = response;
    return data;
  }

//UseEffect to run the function on every render
  useEffect(()=> {
    const GetCoursesYoga = async () => {
      const result = await GetCourses();
      setYogaCourses(result);
      setLevels(Array.from(new Set(result.map((result)=> result.level))));
    } 
    GetCoursesYoga();
  },[]);


  //check if the we got response
  useEffect(()=> {
    if(yogaCourses.length > 0) {
      setIsLoading(false);
    }
  },[yogaCourses])
  

  if(isLoading) {
    return (
      <Loading/>
    )
  } 
  else {
    return (
      <main>
        <div className="title">
                <h2>YOUR PRACTICE REIMAGINED</h2>
            </div>
        <LevelsFilter levels={levels} onChange={levelChangeHandler}/>
        <YogaCourses yogaCourses= {(filterLevels(level)).slice(0,2)}/>
        <ReactPaginate
        prevIoUsLabel = {"PrevIoUs"}
        nextLabel = {"Next"}
        pageCount = {pageCount}
        onPageChange= {pageChange}
        />
      </main>
      );
  }

}

export default App;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）