注意传参没有pageNo的话,就不能实现下拉刷新,因为不知道当前要加载哪页的内容
const [list, setList] = useState<IgetListUserResponce['data']>();
const [showLoading, setShowLoading] = useState(false);const memoState = useMemo<{pageNo: number;total: number;cacheList: ModelList[];}>(() => {return {pageNo: 1,total: 0,cacheList: []}}, []);const fetchList = useCallback(debounce(async (nextPage = false) => {// 没有更多数据了if (nextPage && memoState.cacheList.length >= memoState.total) {return;}setShowLoading(true);try {const newPageNo = memoState.pageNo + 1;const res = await getListUser({lotteryId: Number(getQueryParam('detailId')) || Number(getQueryParam('wyswyg')),pageNo: nextPage ? newPageNo : 1,pageSize: 20,mockFile: 'getListUser'})setShowLoading(false);if (!res?.data) {return;}// !nextPage && setShowList(true);memoState.pageNo = res.data.joinedUsers.pageNo;memoState.total = res.data.joinedUsers.totalCount;memoState.cacheList = res.data.joinedUsers.pageNo === 1 ? res.data.joinedUsers.modelList : [...memoState.cacheList, ...res.data.joinedUsers.modelList];setList({...res.data,joinedUsers: {...res.data.joinedUsers,modelList: [...memoState.cacheList]}})} catch (e) {setShowLoading(false);console.error(e);}}, 10), [list]);const loadNextPage = useCallback(() => {fetchList(true);},[showLoading, fetchList])<ParticipantList data={list} teamStatus={dealStatus} close={setShowList} loadNextPage={loadNextPage} />}<Loading visible={showLoading} />//ParticipantList/index.tsx<div className="participant-list-others"><ul>{modelList.map((item, index) => {return (<li className="participant-list-others-item"><View onAppear={index === modelList?.length-1 ? loadNextPage : undefined} style={{ flexDirection: 'row' }}><PictureclassName="participant-list-others-item-avatar"source={{ uri: item.userAvatar || 'https://lzd-img-global.slatic.net/g/tps/imgextra/i4/O1CN01fZmbF91bKlwJdOvDb_!!6000000003447-0-tps-400-400.jpg' }}style={{width: '62rpx',height: '62rpx',}}/><div className="participant-list-others-item-right"><div className="participant-list-others-item-right-name">{item.userNick}</div><div className="participant-list-others-item-right-time">{i18n.partJoinShow.replace(/<!joinTimeDisplay>/g, item.joinTimeDisplay)}</div></div></View></li>)})}</ul></div>