如何为react-windowed-select组件从API加载数据？

问题背景 #

普通React Select组件可正常从API加载数据，但渲染大型列表时会出现卡顿。react-windowed-select专为大数据列表优化，性能更优，需为其实现从API加载数据的功能。

现有代码对比 #

正常工作的普通React Select #

import React, { useState, useEffect } from "react";

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      const getcountry2 = async () => {
        const req = await fetch(
          `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
        );
        const getres2 = await req.json();
        setUniversidad(await getres2);
      };
      getcountry2();
    }, 2000);
    return () => setInterval(interval);
  }, []);

  return (
    <div className="App">
      <select
        // name="t4"
        className="form-select"
      >
        <option>--Seleccione --</option>
        {t4t.map((getcon2) => (
          <option key={getcon2.id} value={getcon2.name}>
            {" "}
            {getcon2.documento} - {getcon2.name}{" "}
          </option>
        ))}
      </select>

      <br />
      {/*  <input type="text"  value={getcon2.documento} />*/}
    </div>
  );
}

export default App;

待实现的react-windowed-select #

import React, { useState, useEffect } from "react";
import WindowedSelect from "react-windowed-select";

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      const getcountry2 = async () => {
        const req = await fetch(
          `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
        );
        const getres2 = await req.json();
        setUniversidad(await getres2);
      };
      getcountry2();
    }, 2000);
    return () => setInterval(interval);
  }, []);

  //opciones
  const options = [];

  return (
    <div>
      <div class="col-12">
        <br />

        <WindowedSelect options={options} />
      </div>
    </div>
  );
}
export default App;

实现方案及修正后的代码 #

react-windowed-select基于react-select开发，要求options数组的每个元素包含label（显示文本）和value（选中值）属性。同时修复原代码中定时器清理的错误，具体实现如下：

import React, { useState, useEffect } from "react";
import WindowedSelect from "react-windowed-select";

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      const getcountry2 = async () => {
        const req = await fetch(
          `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
        );
        const getres2 = await req.json();
        setUniversidad(getres2);
      };
      getcountry2();
    }, 2000);
    // 修复定时器清理错误，避免内存泄漏
    return () => clearInterval(interval);
  }, []);

  // 将API返回数据转换为react-windowed-select所需的options格式
  const options = [
    // 添加默认选项
    { label: "--Seleccione --", value: "" },
    ...t4t.map(item => ({
      key: item.id,
      label: `${item.documento} - ${item.name}`,
      value: item.name
    }))
  ];

  return (
    <div>
      <div className="col-12">
        <br />
        <WindowedSelect 
          options={options} 
          className="form-select"
        />
      </div>
    </div>
  );
}
export default App;

关键修改点 #

• 数据格式转换：将API返回的t4t数组映射为包含label和value的对象数组，匹配react-windowed-select的要求
• 修复定时器清理：将return () => setInterval(interval)改为return () => clearInterval(interval)，防止内存泄漏
• 添加默认选项：在options数组开头加入默认选择项，保持和普通Select一致的体验
• 统一类名：为WindowedSelect添加form-select类名，保持样式一致性

内容的提问来源于stack exchange，提问作者Giovanny