next/preview分页不正常

Question

我需要关于分页逻辑的帮助。它可以工作，但它并不像它应该的那样工作。频繁按下时，页面可能不会加载(消失，因为数字会变大或变小)

逻辑分页：

   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)
   }

当你点击下一步时，你会跳转到最后一页，但是当你点击后退时，页面会跳转到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>

Answer 1

你应该使用

setNumber(previous => previous - 1)

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

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