下一个/预览分页无法正常工作答案

【问题标题】：pagination does not work correctly next/preview下一个/预览分页无法正常工作
【发布时间】：2021-10-21 12:36:27
【问题描述】：

我需要分页逻辑方面的帮助。它可以工作，但不能正常工作。频繁按下，页面可能无法加载（消失，因为数字变大或变小）

逻辑分页：

   const [number, setNumber] = useState(1)

   const previewPage = ():void =>{
      if(number < 1){
         setNumber(1)
      }else{
         setNumber(number - 1)
         setCurrentPage(number)
         console.log(number)
      }
   }

   const nextPage = ():void => {
      if(number > totalPage.length){
         setNumber(totalPage.length)
      }else{
         setNumber(number + 1)
         setCurrentPage(number)
         console.log(number)
      }
   }

   const paginate = (numberPage:number):void => {
      setNumber(numberPage)
      setCurrentPage(numberPage)
   }

点击next的时候是到最后一页，点击back的时候是第5页，然后又突然到了3页，不知道怎么正确编排逻辑

分页按钮：

 <button onClick={() => previewPage()}> назад </button>
 {totalPage.map((number:number):JSX.Element => {
    return <button onClick={() => paginate(number)} key={number}>{number}</button>
 })}
 <button onClick={() => nextPage()}> вперёд </button>

【问题讨论】：

标签： javascript reactjs typescript pagination

【解决方案1】：

你应该使用

setNumber(previous => previous - 1)

在所有情况下，您都希望确定状态的先前值。

就像在这个答案中解释https://stackoverflow.com/a/55496277/15601007

【讨论】：