React搜索功能结果异常：匹配不符合预期问题求助

功能背景 #

我正在实现一个搜索功能，通过输入框检索包含以下字段的用户列表：

• id：唯一标识
• name：用户名
• items：用户订购的商品列表
• address：用户地址
• pincode：用户地址邮政编码

搜索需要覆盖所有字段，数据源为模拟接口返回的用户数据。

问题现象 #

搜索结果不符合预期，例如：

• 搜索“Jo”时会显示包含“Ja”的结果
• 搜索“12”时会返回包含“aa”和“32”的结果

预期效果：搜索结果需具备可预测性，比如搜索“Beno”应仅返回1个用户。

相关代码（SearchBox组件） #

import React, { useState, useRef, useEffect } from 'react'
import '../stylesheets/searchbar.css';
import Card from './Card';

export default function SearchBar({ placeholder, data }) {
  const [searchInput, setSearchInput] = useState('');
  const [filteredResult, setFilteredResult] = useState([]);
  const [searching, setSearching] = useState(false);
  
  const handleSearch = (event) => {
    const value = event.target.value;
    if (value.length === 0) {
      setFilteredResult([])
      setSearching(false);
    }
    if (value?.length > 0) {
      searchItems(value);
      setSearching(true);
    }
  }

  const searchItems = (searchValue) => {
    setSearchInput(searchValue);
    if (searchInput.length !== 0) {
      const filteredData = data.filter((item) => {
        return Object.values(item).join(' ').toLowerCase().includes(searchInput.toLowerCase());
      });
      setFilteredResult(filteredData);
    }
  };

  return (
    <div className='search'>
      <div className='searchInput'>
        <input type="text" placeholder={placeholder} data={data} onChange={handleSearch} />
      </div>
      {
        filteredResult?.length > 0 ? (
          <div className='searchResult'>
            {filteredResult.map(({ id, name, address }, i) => (
              <Card key={id} id={id} name={name} address={address} searchInput={searchInput} filteredResult={filteredResult} />
            ))}
          </div>
          ) : (
          <div>
            {searching ? (
              <div className='searchResult'>No user found</div>
            ) : (
                null
            )}
          </div>         
        )
      }
    </div>  
  )
}

问题分析与修复方案 #

核心问题 #

1. 异步状态更新延迟：searchItems中先调用setSearchInput，紧接着就用searchInput过滤数据。但React的setState是异步操作，此时searchInput还是旧值，导致过滤逻辑用了错误的关键词。
2. 嵌套字段未处理：items是数组，直接Object.values(item).join(' ')会把数组转为字符串（若数组内是对象则会变成[object Object]），无法正确检索商品内容。
3. 跨字段拼接误匹配：所有字段值拼接成一个字符串后用includes，容易出现跨字段的部分字符组合成搜索关键词的误匹配。

修复后的代码 #

import React, { useState } from 'react'
import '../stylesheets/searchbar.css';
import Card from './Card';

export default function SearchBar({ placeholder, data }) {
  const [searchInput, setSearchInput] = useState('');
  const [filteredResult, setFilteredResult] = useState([]);
  const [searching, setSearching] = useState(false);
  
  const handleSearch = (event) => {
    const value = event.target.value.trim();
    if (value.length === 0) {
      setFilteredResult([]);
      setSearching(false);
      return;
    }
    
    // 直接用当前输入值过滤，避免异步状态问题
    const filteredData = data.filter(item => {
      // 展开所有字段，包括嵌套的items数组
      const flattenValues = [
        item.id,
        item.name,
        item.address,
        item.pincode,
        // 提取每个商品的名称（根据实际字段调整）
        ...item.items.map(goods => goods.name)
      ].map(val => String(val).toLowerCase());
      
      // 检查单个字段是否包含关键词，避免跨字段误匹配
      return flattenValues.some(val => val.includes(value.toLowerCase()));
    });
    
    setFilteredResult(filteredData);
    setSearching(true);
    setSearchInput(value);
  };

  return (
    <div className='search'>
      <div className='searchInput'>
        <input type="text" placeholder={placeholder} onChange={handleSearch} />
      </div>
      {filteredResult?.length > 0 ? (
        <div className='searchResult'>
          {filteredResult.map(({ id, name, address }) => (
            <Card key={id} id={id} name={name} address={address} />
          ))}
        </div>
      ) : (
        searching && <div className='searchResult'>No user found</div>
      )}
    </div>  
  )
}

修复说明 #

1. 解决异步状态问题：直接在handleSearch中使用当前输入的value过滤，不再依赖searchInput状态，避免异步更新导致的关键词错误。
2. 处理嵌套字段：显式提取items数组中的商品名称，确保商品字段能被正确检索。
3. 精准匹配：遍历每个字段单独检查是否包含关键词，避免跨字段拼接导致的误匹配。
4. 简化逻辑：合并handleSearch与searchItems的逻辑，减少不必要的函数调用，代码更简洁。

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