当前位置：首页 > news >正文

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

news 来源：原创 2024/5/20 15:08:43

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) // 是否继续fetchconst [loading, setLoading] = useState(false)// 初始化useEffect(() => {getList()}, [])// 条件搜索useEffect(() => {if (shouldFetch) {getList()}}, [shouldFetch])// 接口获取数据async function getList() {setLoading(true)const { limit, page } = pageOptionconst params = {limit,page,statusIds: tabs[tabIndex].index,keywords}await fetchMyBookList(params).then((res) => {if (!res) returnconst 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="请输入" /><buttononClick={(e) => {setKeywords(e.detail.value)// 搜索时候需要 重置所有参数，包括分页参数setPageOption(DEFAULT_PAGE)setShouldFetch(true)}}>搜索</button><div>{tabs.map((item, index) => {return (<divkey={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的执行顺序是不确定的，
但是它们的状态更新会在同一次渲染中完成。