React中结合搜索输入与OnClick事件过滤API结果的实现问题

数据老陈

2026-8-29

现有代码的问题

过滤逻辑互斥，无法实现双维度同时过滤：你现在用if...else if写判断，只要商品名匹配搜索词就直接返回，不会再校验分类匹配规则，两个过滤条件是二选一的关系，不是同时生效。而且当两个条件都不满足时，map的回调函数没有返回值，会生成undefined的空节点，可能导致渲染异常。
缺少边界容错：当inputVal或者buttonVal为空时，String.includes('')会默认匹配所有项，初始状态下很容易出现不符合预期的全量展示；如果接口返回的某条数据缺失name或者category字段，直接调用includes会直接抛类型错误导致页面崩溃。
冗余代码多：两个判断分支返回的JSX结构几乎完全一致，重复写两遍维护性很差。
细节语法不规范：img是HTML自闭合标签，不需要额外写</img>闭合；直接用数组索引index作为列表key，在过滤、排序场景下很容易出现组件渲染错位的问题。

修正方案

不要在map遍历的过程中写分支判断返回，遵循先过滤、再渲染的思路，把过滤逻辑单独抽出来，拿到符合条件的商品列表之后再遍历渲染，逻辑清晰也不容易出问题。
首先确认状态定义和事件处理的基础逻辑：

import { useState } from 'react'

// 组件内状态定义，初始值统一为空
const [inputVal, setInputVal] = useState('') // 搜索框输入值
const [buttonVal, setButtonVal] = useState('') // 选中的分类值
const [productList, setProductList] = useState([]) // 接口返回的商品列表

// 搜索框输入处理
const handleChange = (e) => {
  setInputVal(e.target.value.trim())
}

// 分类按钮点击处理，入参是点击的分类值
const handleCategoryClick = (categoryVal) => {
  setButtonVal(categoryVal)
}

// 这里写你原来的接口请求逻辑，把返回结果存在productList里

修正后的渲染代码：

<div id="buy-grid" className="product-grid">
  <div className="content">
    <h3>Search for Products</h3>
    <form>
      <input type="text" onChange={handleChange} />
      <h3>Top Results</h3>
    </form>
    <div className="grid">
      {productList
        // 第一步：双维度过滤
        .filter(item => {
          // 字段容错，避免空值报错
          const productName = item?.name ?? ''
          const productCategory = item?.category ?? ''
          // 搜索维度：搜索词为空时不限制，不为空时要求商品名包含搜索词
          const isMatchSearch = inputVal ? productName.includes(inputVal) : true
          // 分类维度：未选分类时不限制，选中后要求商品分类匹配
          const isMatchCategory = buttonVal ? productCategory.includes(buttonVal) : true
          // 两个维度同时满足才保留，需要或逻辑就把&&改成||
          return isMatchSearch && isMatchCategory
        })
        // 第二步：遍历渲染过滤后的结果
        .map(item => (
          <div
            // 优先用商品唯一id当key，没有唯一id再退而求其次用名称/索引
            key={item.id ?? item.name}
            className={inputVal ? "product-card one" : "product-card two"}
          >
            <p>{item.name}</p>
            {/* img为自闭合标签，必须加alt属性 */}
            <img src={item.image} alt={item.name} />
          </div>
        ))}
    </div>
  </div>
</div>

补充说明：如果你的业务需求是「匹配搜索词或者匹配分类任意一个就展示」，只需要把过滤逻辑里的return isMatchSearch && isMatchCategory改成return isMatchSearch || isMatchCategory即可，常规电商场景的筛选默认是多条件同时满足的与逻辑。

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