React数组搜索过滤功能首字符匹配失效问题排查

过滤逻辑存在两个明显问题，直接导致了你遇到的反常匹配现象：

1. 大小写转换不对称：你仅将用户输入的搜索词searched转为了小写，但被匹配的目标字符串term.term_name保留了原始大小写（值为Name，首字母大写、后续字母小写）：
   • 输入n时，实际执行的判断是'Name'.includes('n')，原字符串中只有大写N没有小写n，返回false，因此结果为空
   • 输入a/am/ame时，这几个字符本身就是Name中的小写部分，判断返回true，因此能匹配到结果
2. 遍历逻辑无效：你写了Object.values(term).some()遍历术语对象的所有字段，但判断时完全没有使用遍历拿到的val，一直硬编码判断term_name字段，等于遍历代码完全冗余，也无法实现匹配definition字段的预期。

另外你贴的代码缺失了searched的状态声明、存在标签未闭合问题，列表渲染也没加React要求的key属性，实际运行会报错或抛出警告。

修复核心是保证匹配双方大小写统一，同时修正无效的遍历逻辑，补全代码缺失部分：

import { useState } from 'react';

export default function TermSearch() {
  const [termList, setTermList] = useState([{term_name: 'Name', definition: 'This is a glossary term'}]);
  // 补全缺失的搜索词状态
  const [searched, setSearched] = useState('');

  const filtered = termList.filter((term) =>
    Object.values(term).some(
      (val) =>
        typeof val === "string" &&
        // 目标值和搜索词统一转小写，用遍历到的字段值做匹配，加trim处理首尾误输入空格
        val.toLowerCase().includes(searched.trim().toLowerCase())
    )
  );

  return (
    <div>
      <div>
        <input
          type="text"
          value={searched}
          onChange={(ev) => setSearched(ev.target.value)}
        />
      </div>
      <div className="termList">
        {filtered.map((term, idx) => (
            // 补全列表渲染要求的key，闭合所有标签
            <div key={idx}>
              <div>{term.term_name.toLowerCase()}</div>
              <div>{term.definition}</div>
            </div>
        ))}
      </div>
    </div>
  );
}

修复后输入大写N、小写n都能正常匹配到Name条目，输入释义中的关键词比如glossary也能命中对应结果，符合多字段搜索的预期。

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