react hook ts 实现列表的滚动分页加载，多参数混合混合搜索

InfiniteScroll 的组件见： https://blog.csdn.net/Zhooson/article/details/134396945
search.tsx 页面

import { FC, useEffect, useState } from 'react'
import InfiniteScroll from '../../components/InfiniteScroll'

const tabs = [
  {
    id: 1,
    title: 'tab-1',
    index: '1'
  },
  {
    id: 2,
    title: 'tab-1',
    index: '2'
  }
]

const DEFAULT_PAGE = {
  page: 1,
  limit: 10,
  total: 0,
  hasMore: true
}

const MyBook: FC = () => {
  const [tabIndex, setTabIndex] = useState(0)
  const [pageOption, setPageOption] = useState(DEFAULT_PAGE)

  const [list, setList] = useState<any>([])
  const [keywords, setKeywords] = useState()
  const [shouldFetch, setShouldFetch] = useState(false) // 是否继续fetch
  const [loading, setLoading] = useState(false)

  // 初始化
  useEffect(() => {
    getList()
  }, [])

  // 条件搜索
  useEffect(() => {
    if (shouldFetch) {
      getList()
    }
  }, [shouldFetch])

  // 接口获取数据
  async function getList() {
    setLoading(true)
    const { limit, page } = pageOption
    const params = {
      limit,
      page,
      statusIds: tabs[tabIndex].index,
      keywords
    }
    await fetchMyBookList(params)
      .then((res) => {
        if (!res) return

        const newList = list.concat(res.Data.records)
        setList(newList)

        setPageOption((prevPageOption) => ({
          ...prevPageOption,
          hasMore: newList.length < res.Data.total,
          total: res.Data.total || 0
        }))
        setLoading(false)
        setShouldFetch(false)
      })
      .catch(() => {})
  }

  // 加载更多
  async function loadMore() {
    setPageOption((prevData) => {
      // 数据异步更新导致
      if (prevData.hasMore) {
        setShouldFetch(true)
        return { ...prevData, page: prevData.page + 1 }
      } else {
        return prevData
      }
    })
  }

  return (
    <div>
      <input type="text" placeholder="请输入" />
      <button
        onClick={(e) => {
          setKeywords(e.detail.value)
          // 搜索时候需要 重置所有参数，包括分页参数
          setPageOption(DEFAULT_PAGE)
          setShouldFetch(true)
        }}
      >
        搜索
      </button>

      <div>
        {tabs.map((item, index) => {
          return (
            <div
              key={index}
              onClick={() => {
                setTabIndex(index)
                setList([])
                setPageOption(DEFAULT_PAGE)
                setShouldFetch(true)
              }}
            >
              {item.title}
            </div>
          )
        })}
      </div>

      {list.length === 0 && !loading && <div>～暂无数据～</div>}
      {list.length > 0 && (
        <div>
          {list.map((_: any, index: number) => {
            return <div key={index}>{index}</div>
          })}
        </div>
      )}

      {list.length > 8 && (
        <InfiniteScroll loadMore={loadMore} hasMore={pageOption.hasMore} />
      )}
    </div>
  )
}

export default MyBook

解释： 1. 当前的hook执行都是异步，会不会存在先执行完先渲染？ setTabIndex(index), setList([])
, setPageOption(DEFAULT_PAGE)
, setShouldFetch(true)

在React中，状态更新函数（如setPageOption、setTabIndex和setShouldFetch）是异步的，
这意味着它们不会立即更新状态。然而，React会保证在同一次事件处理函数中的所有状态更新都在同一次渲染中完成。
这就意味着，在searchHandler函数中，setPageOption、setTabIndex和setShouldFetch的执行顺序是不确定的，
但是它们的状态更新会在同一次渲染中完成。