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([])
  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 (
    

      
       {
          setKeywords(e.detail.value)
          // 搜索时候需要 重置所有参数，包括分页参数
          setPageOption(DEFAULT_PAGE)
          setShouldFetch(true)
        }}
      >
        搜索
      

      

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

      {list.length === 0 && !loading && 
～暂无数据～
}
      {list.length > 0 && (
        

          {list.map((_: any, index: number) => {
            return 
{index}
          })}
        
      )}

      {list.length > 8 && (
        
      )}
    
  )
}

export default MyBook

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

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

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

2. 为什么引入 setShouldFetch ？

这个搜索页面的，有多个参数，有的参数改变是立刻fetch一下接口，有的参数改变是要点击按钮才能fetch一下，这样导致你在useEffect无法统一检测搜索参数变化。 故引入 setShouldFetch 这个变量，通过检测setShouldFetch的变化，一旦变化就fetch