React实现产品数组搜索过滤功能代码逻辑错误排查求助

• 问题1：useEffect依赖缺失

Products组件内触发过滤的useEffect仅设置了空依赖数组，只会在组件首次挂载时执行一次，后续searchValue搜索词变化时不会重新触发过滤逻辑，导致搜索没有响应。

• 问题2：过滤数据源错误

过滤时使用的是productsInfo状态而非传入的原始data，productsInfo初始为空，只要触发过一次非空搜索后数组被过滤缩小，后续再搜索其他内容就无法匹配到原始数据里的其他产品。

• 问题3：匹配逻辑语法错误

includes方法返回的是布尔值，代码中直接将布尔值和处理后的搜索字符串做全等判断，结果永远为false，无法正确匹配产品。

• 问题4：状态展示逻辑混淆

把「初始加载」和「搜索无结果」两种状态都展示为Loading...，用户无法区分是正在加载还是没有匹配结果。

• 问题5：key值使用不合理

列表渲染时用数组下标作为key，若后续产品列表有增删排序会引发渲染性能问题，甚至出现内容错乱。

主要修改Products组件即可，其他组件逻辑无需调整：

import { useMemo } from "react";

function Products({ data, searchValue }) {
  // 用useMemo计算过滤后的产品列表，无需多余state和useEffect
  const filteredProducts = useMemo(() => {
    const processedSearch = searchValue.toLowerCase().trim();
    if (processedSearch === "") return data;
    return data.filter(product => 
      product.name.toLowerCase().trim().includes(processedSearch)
    );
  }, [data, searchValue]); // 依赖原始数据和搜索词，变化时自动重新计算

  // 区分状态展示
  if (!filteredProducts.length) {
    return searchValue.trim() ? <div>未找到匹配的产品</div> : <div>Loading...</div>;
  }

  return (
    <div>
      {filteredProducts.map((product) => {
        return (
          <div
            key={product.name} // 用唯一的产品名作为key
            style={{ backgroundColor: "grey", maxWidth: "300px" }}
          >
            <h4>{product.name}</h4>
            <p>{product.category}</p>
            <p> {product.price} </p>
            <hr />
          </div>
        );
      })}
    </div>
  );
}

export default Products;

• 增加防抖处理：用户输入时延迟300ms再执行过滤，避免高频输入时频繁触发计算，提升页面流畅度
• 扩展搜索范围：支持同时匹配产品名称、分类、价格等多字段，提升搜索实用性
• 增加搜索词高亮：将匹配到的搜索词在产品名称中高亮展示，优化用户体验
• 增加大小写不敏感的统一预处理：避免每次过滤都重复调用toLowerCase、trim方法，性能更好
• 增加清空搜索按钮：输入框右侧加一键清空功能，提升操作便捷性

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