select下拉框---无限滚动加载

最新推荐文章于 2024-07-12 08:49:54 发布

优雅的大白鹅

最新推荐文章于 2024-07-12 08:49:54 发布

阅读量1.1k

点赞数 3

分类专栏：项目实用小方法文章标签：前端 react.js 无限滚动加载 typescript

本文链接：https://blog.csdn.net/weixin_48186771/article/details/131523267

版权

需求： select的下拉框，后端做了分页，此时前段需要同步加分页
解决思路： 考虑到交互和性能，采用触底请求下一页（无限滚动加载）

代码示例：

import {
    Select, message } from 'antd';
import React, {
    useEffect, useState } from 'react';

const App: React.FC = () => {
   
  const [selectArr, setSelectArr] = useState([]); //下拉框数组
  const [loading, setLoading] = useState(false); //加载loading
  const [hasMore, setHasMore] = useState(true); //是否还有更多数据需要加载
  const PAGE_SIZE = 10; //每页数量
  const [page, setPage