react 函數元件useState異步變同步

需求 函數元件實作一個下拉上拉的清單，清單支援分頁。最開始我們使用setstate的方式去報錯目前頁數。這樣做的問題，就是有一個異步的延遲。上代碼

const [pageNo, setpageNo] = useState(1)

  const onPullUpRefresh = () => {
    console.log("上拉加載内容")
    console.log("上一次的pageNo", pageNo)
    setpageNo(pageNo + 1)
    console.log("增加後的pageNo", pageNo)
    console.log("上拉頁數+1", pageNo)
    //網絡請求擷取資料
    setList()
  }


  // 擷取清單資料
  const setList = () => {
    // // 判斷是考試還是課程
    if (current === 0) {
      console.log('重新整理考試内容')
      const params = {
        pageNo: pageNo,
        pageSize: 10,
        examStatus: flag,
      }
      console.log('擷取資料入參是什麼-------', params)
      getPersonExamList(params).then(res => {
        if (res.code === '0') {
          if (pageNo == 1) {
            console.log('上拉記載結果為----', res.data.list)
            setExamList(res.data.list)
            setCourseList([])
          } else {
            console.log('上拉記載結果為----', res.data.list)
            examList.push(...res.data.list)

            console.log('new listdata 合并後的------', examList)
            setExamList(JSON.parse(JSON.stringify(examList)))
          }

        }
      })
    }
           

這樣可以實作功能，但是結果就是上拉一次還是重新整理第一頁内容。拉兩次才更能拉到第二頁的資料。就是setstate有一個延遲。第一次上拉的時候。pageNo異步處理 還沒更新到2，是以總是差一頁。第一次上拉不會加載出第二頁的内容。有圖檔可以看出還是10條資料。

 解決方案：

1.useRef 通常大家都是用這個來進行綁定dom操作。但是忽略的這個是可以當做存儲容器來用的 也就是引用一個PageNo 然後通過useRef進行同步操作

const [pageNo, setpageNo] = useState(1)

  const numRef = useRef(pageNo);

  const onPullUpRefresh = () => {
    console.log("上拉加載内容")
    console.log("上一次的pageNo", numRef.current)

    numRef.current = numRef.current + 1

    console.log("增加後的pageNo", numRef.current)

    //網絡請求擷取資料
    setList()
  }

  // 擷取清單資料
  const setList = () => {
    // // 判斷是考試還是課程
    if (current === 0) {
      console.log('重新整理考試内容')
      const params = {
        pageNo: numRef.current,
        pageSize: 10,
        examStatus: flag,
      }
      console.log('擷取資料入參是什麼-------', params)
      getPersonExamList(params).then(res => {
        if (res.code === '0') {
          if (numRef.current == 1) {
            console.log('上拉記載結果為----', res.data.list)
            setExamList(res.data.list)
            setCourseList([])
          } else {
            console.log('上拉記載結果為----', res.data.list)
            examList.push(...res.data.list)

            console.log('new listdata 合并後的------', examList)
            setExamList(JSON.parse(JSON.stringify(examList)))
          }
          console.log('接口中pageNO的值是什麼', numRef.current)
        }
      })
    }
           

這樣就可以正常實作上拉邏輯~

解決方案2

定義一個全局變量 通過全局變量來控制頁碼

//同步處理pageNO
var pageNo = 1

function Training() {

  函數元件---------

}
           

其他邏輯同上面。但是一定要注意定義pageNo的代碼要寫在函數元件外面。這樣才能實作每次上拉重新整理進行累加。否則每次上拉都是從1加到2 因為每次函數重新調用 pageNo都會被重置為1