React电商模板品牌筛选点击后产品全消失问题求助

核心问题 #

1. 原始数据丢失：你直接用setProducts修改了存储所有产品的状态，第一次筛选后products就变成了对应品牌的子集，后续再筛选时只能从这个子集里匹配数据，一旦匹配不到就会变成空数组。
2. 原生DOM事件绑定不符合React逻辑：用document.querySelectorAll加事件监听的方式，会在组件重新渲染后出现监听失效或重复绑定的问题，完全脱离了React的状态管理流程。
3. 文本匹配可能存在空格问题：f.target.textContent可能包含前后空格、换行符，和product.brand的字符串不完全一致，导致第一次过滤就返回空数组。

修复步骤 #

1. 保留原始产品数据

单独存储一份原始产品数据，后续所有筛选操作都基于这份数据进行，避免原始数据丢失：

// 保存原始产品数据，作为筛选的数据源
const [originalProducts, setOriginalProducts] = useState(props.productData.products);
// 用状态记录当前选中的品牌
const [selectedBrand, setSelectedBrand] = useState(null);
const [productsLimit, setProductsLimit] = useState(props.productData.limit);

2. 用React事件绑定替代原生DOM操作

在渲染筛选品牌栏时，直接给每个品牌元素添加onClick事件，直接传递品牌名称：

{/* 渲染筛选品牌栏（根据你的实际结构调整） */}
<div className='filter'>
  {/* 去重获取所有品牌 */}
  {Array.from(new Set(originalProducts.map(p => p.brand))).map(brand => (
    <div 
      key={brand} 
      className='name' 
      onClick={() => setSelectedBrand(brand)}
    >
      {brand}
    </div>
  ))}
</div>

3. 基于选中品牌过滤产品

渲染产品列表时，根据selectedBrand过滤原始数据，同时处理字符串空格问题：

<div className='products'>
  {originalProducts
    ?.filter(product => {
      // 未选中品牌时显示全部，选中时精准匹配（去除前后空格避免匹配失败）
      if (!selectedBrand) return true;
      return product.brand.trim() === selectedBrand.trim();
    })
    .slice(0, productsLimit)
    .map(product => (
      <div className='product' key={product.id}>
        <div className='productImage'>
          <img src="" data-src={product.thumbnail} />
        </div>
        <div className='productInfo'>
          <div className='productTitle'>
            <div className='productBrand'>{product.brand}</div> 
            <div className='productName'>{product.title}</div>
          </div>
          <div className='productPrice'>Price: {product.price}</div>
        </div>
      </div>
    ))}
</div>

额外优化（可选） #

• 添加“重置筛选”按钮，点击后设置selectedBrand为null，恢复显示全部产品。
• 如果需要支持多品牌筛选，可将selectedBrand改为数组，用includes判断是否匹配。

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