React客户数组搜索异常：退格后不更新且无法显示初始数据

问题根源 #

你当前的代码有个致命问题：每次搜索时，都是从已经被过滤过的customers状态里再次筛选数据，而不是基于完整的原始客户列表。第一次搜索后，customers已经变成了缩小后的结果，当你按退格键缩短搜索词时，只能在这个小范围里过滤，自然没法恢复到初始的完整客户数据，甚至会出现搜索结果越来越少的情况。

修复方案 #

核心思路是保留一份原始客户数据的副本，始终基于这份原始数据做过滤，而不是修改后的状态数据。同时优化触发时机，让搜索更流畅：

1. 新增一个状态存储原始客户数据，永远不修改它；
2. 将搜索逻辑移到onChange事件中，输入时实时更新结果；
3. 过滤操作始终基于原始数据，确保每次搜索都能从完整数据集出发。

修改后的代码 #

// 假设你的初始客户数组是initialCustomers
const [originalCustomers, setOriginalCustomers] = useState(initialCustomers);
const [searchCustomer, setSearchCustomer] = useState('');
const [customers, setCustomers] = useState(initialCustomers);

const changeSearchCustomer = (e) => {
  const inputValue = e.target.value;
  setSearchCustomer(inputValue);

  // 基于原始数据过滤，保证每次搜索的数据源完整
  const filteredCustomers = originalCustomers.filter(el =>
    el.firstName.toLowerCase().includes(inputValue.toLowerCase())
  );
  setCustomers(filteredCustomers);
};

<input 
  type="text" 
  placeholder="search..." 
  value={searchCustomer} 
  onChange={changeSearchCustomer} 
/>

额外说明 #

• 移除了原来的searchingCustomer函数和onKeyUp事件，因为onChange能更实时地响应输入变化，避免按键抬起的延迟；
• originalCustomers只在初始化时赋值，后续不会被修改，确保过滤的数据源始终完整；
• 输入为空时，filteredCustomers会等于originalCustomers，自动恢复显示所有客户数据。

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