react-select输入过滤时因重渲染数据为空的问题求助

核心问题分析 #

1. 原始数据未持久化：tempFilteredModelList如果是普通变量，组件重渲染时会被重新初始化，导致过滤时拿不到完整的原始数据。
2. 过滤函数写法错误：误用Array.filter，不需要手动push到新数组，且未处理输入长度≤1的场景，直接设置空数组导致下拉无数据。

修复步骤 #

1. 持久化存储原始数据 #

在自定义HookuseHome中，用useRef存储从API获取的完整原始数据（避免重渲染时丢失）：

import { useState, useEffect, useRef } from 'react';

const useHome = () => {
  const [vehicleModels, setVehicleModels] = useState([]);
  // 用useRef存完整原始数据，重渲染时不会被重置
  const originalModelsRef = useRef([]);

  useEffect(() => {
    // 模拟API请求逻辑
    const fetchData = async () => {
      const res = await fetch('你的API地址');
      const data = await res.json();
      // 首次加载仅展示50条
      setVehicleModels(data.slice(0, 50));
      // 把完整数据存入ref
      originalModelsRef.current = data;
    };
    fetchData();
  }, []);

  // ...其他逻辑
};

2. 修正过滤函数逻辑 #

优化过滤逻辑，正确使用filter并处理输入长度≤1的场景：

const filterVehicleModels = (inputValue) => {
  const originalData = originalModelsRef.current;
  if (!originalData.length) return;

  let filteredData = [];
  if (inputValue.length > 1) {
    // 直接用filter返回匹配的结果数组
    filteredData = originalData.filter(item => 
      item.label.toLowerCase().includes(inputValue.toLowerCase())
    );
  } else {
    // 输入内容过短时，恢复展示初始的50条数据
    filteredData = originalData.slice(0, 50);
  }
  setVehicleModels(filteredData);
};

3. 优化函数稳定性（可选） #

用useCallback包裹过滤函数，避免每次重渲染创建新函数：

import { useCallback } from 'react';

const filterVehicleModels = useCallback((inputValue) => {
  const originalData = originalModelsRef.current;
  if (!originalData.length) return;

  let filteredData = [];
  if (inputValue.length > 1) {
    filteredData = originalData.filter(item => 
      item.label.toLowerCase().includes(inputValue.toLowerCase())
    );
  } else {
    filteredData = originalData.slice(0, 50);
  }
  setVehicleModels(filteredData);
}, []);

4. 保持组件中Select的用法 #

Home组件里的Select无需修改，维持原有写法即可：

<Select
  onInputChange={(value) => filterVehicleModels(value)}
  options={vehicleModels} 
/>

额外提示 #

• 确认API返回的数据结构符合react-select要求（每个项包含label和value字段）。
• 如果原始数据量极大，建议在后端做分页或过滤，避免前端处理大量数据影响性能。

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