搜索功能删除部分字符后无法返回匹配结果的技术求助

架构老林

2026-7-29

问题根源

你这段代码的问题出在：每次搜索都是拿已经过滤过的clientes状态来做新的过滤，而不是用原始的全量客户数据。比如你搜"张"，clientes变成了所有姓张的客户；之后你删掉"张"的一部分（比如清空到只剩""之前的操作），此时过滤的数据源已经是姓张的那批，自然搜不出其他客户，只有清空到空字符串时才会调用getClientes()重新拉全量数据。

解决办法

核心思路就是存一份原始的全量客户数据，每次搜索都基于这份数据过滤，而不是当前的clientes。具体改法如下：

新增一个状态变量用来存原始全量数据，比如叫originalClientes
拉取客户数据的getClientes方法里，同时把数据存到originalClientes和clientes里
修改搜索函数，用originalClientes来做过滤

修改后的完整代码示例：

// 新增原始数据状态
const [originalClientes, setOriginalClientes] = useState([]);
const [clientes, setClientes] = useState([]);

// 假设你的getClientes是获取数据的方法，修改成同时更新两个状态
const getClientes = async () => {
  // 这里替换成你实际获取客户数据的逻辑
  const response = await fetch('/your-api-endpoint');
  const data = await response.json();
  setOriginalClientes(data); // 保存原始全量数据
  setClientes(data); // 初始显示全部客户
};

const searchClientes = (e) => {
  const searchText = e.target.value.trim().toLowerCase();

  if (searchText === '') {
    setClientes(originalClientes);
    return;
  }

  // 基于原始全量数据过滤，而不是已过滤的clientes
  const filtered = originalClientes.filter(cliente => {
    return cliente.nome.toLowerCase().includes(searchText) ||
           cliente.email.toLowerCase().includes(searchText);
  });
  setClientes(filtered);
};

额外优化点