antd Select下拉框，模拟实现下拉框到底的时候，组件下拉框分页加载数据

最近实习遇到一个需求，组件的下拉框到底的时候，需要发请求获取下一页的数据进行展示。网上看了一下大家的做法，有些不知道是不是故意，隐去了一些细节上的处理，按照他的方法会出现一些bug。这里使用写死的数据模拟了一下场景。菜鸟学习，记录一下。

下拉框用到的数据在options中，他是一个数组的数组，其中包含的每一个数组模拟分页请求的一页数据，用一个index进行索引

需要注意几点：

• onPopupScroll传入的参数需要进行debounce，不然会连续触发多次
• 判断拉到底的时候，需要先判断e.target.scrollTop是不是0，否则那一页的数据展示完并没有出现滚动条的话，也会被判定为拉到底了，再次触发onPopupScroll的回调
• 因为这里使用的是模拟数据，不涉及发请求。发请求的话，传给onSearch的函数中需要判断一下搜索参数，如果有参数就把pageNo重新设置为1

const res = await getAnchorPoolIdList({
        name: searh,
        pageNo: searh ? 1 : pageNo,
        pageSize: 10,
      });

代码如下

import React, { useState } from "react";
import { Select, Form } from "antd";
import debounce from "lodash/debounce";

function Home() {
  const columns1 = [   //写了9个这样的columns，其他的结构都一样，这里就留下了2个
    {
      label: 1,
      value: 1,
    },
    {
      label: 1,
      value: 2,
    },
    {
      label: 1,
      value: 3,
    },
    {
      label: 1,
      value: 4,
    },
    {
      label: 1,
      value: 5,
    },
    {
      label: 1,
      value: 6,
    },
    {
      label: 1,
      value: 7,
    },
    {
      label: 1,
      value: 8,
    }
  ];
 
  const columns9 = [
    { label: 9, value: 1 },
    { label: 9, value: 2 },
    { label: 9, value: 3 },
    { label: 9, value: 4 },
    { label: 9, value: 5 },
    { label: 9, value: 6 },
  ];
  const columns = [
    columns1,
    columns2,
    columns3,
    columns4,
    columns5,
    columns6,
    columns7,
    columns8,
    columns9,
  ];

  const [index, setIndex] = useState(0);
  const [options, setOptions] = useState(columns[index]);
  const handleScroll = (e: any) => {
    if (
      e.target.scrollTop !== 0 &&
      e.target.scrollTop + e.target.offsetHeight >= e.target.scrollHeight //判断拉到底
    ) {
      setIndex(index + 1);
      if (index === 9) {
        setIndex(0);
      }
      setOptions(columns[index]);
      console.log("到底了");
    }
  };
  return (
    <Form>
      <Form.Item name="select" label="选择器">
        <Select
          showSearch
          onSearch={(value) => {
            console.log(value);
          }}
          onPopupScroll={debounce(handleScroll, 1000)}
        >
          {options.map((item) => {
            return (
              <Select.Option key={item.value} value={item.value}>
                {item.label}
              </Select.Option>
            );
          })}
        </Select>
      </Form.Item>
    </Form>
  );
}

export default Home;