React对象数组搜索无结果排查：无报错但无数据显示

问题根源及修复方案 #

你的代码存在几个关键问题导致搜索无结果且没有内容渲染：

1. 过滤逻辑错误：

   • 你使用 Object.values(x).includes(searchInput.toLowerCase()) 是在检查对象值数组中是否存在完全匹配的搜索词，而非检查值是否包含搜索词作为子串。比如输入"pur"无法匹配"purple"。
   • 对象中的非字符串类型（Date日期、number数字）无法与字符串类型的搜索词匹配，比如搜索"7"时，capacity的数值7不会被识别为匹配。

2. 大小写不兼容：
   你仅将搜索输入转为小写，但未将对象中的字符串值转为小写，导致搜索是大小写敏感的（比如输入"Purple"无法匹配"purple"）。

3. JSX语法错误：
   <input>标签未正确闭合，JSX要求自闭合标签必须以/>结尾。

4. 未返回渲染元素：
   map函数内部没有返回任何JSX元素，即使过滤出结果也无法在页面显示。

修复后的完整代码 #

import { useState } from 'react';

function CarSearch() {
  const [searchInput, setSearchInput] = useState('');

  const cars = [
    {
      "color": "purple",
      "type": "minivan",
      "registration": new Date('2017-01-03'),
      "capacity": 7
    },
    {
      "color": "red",
      "type": "station wagon",
      "registration": new Date('2018-03-03'),
      "capacity": 5
    },
  ];

  // 修正后的过滤逻辑
  const filteredCars = cars.filter(car => 
    Object.values(car).some(value => 
      // 将所有值转为字符串并统一小写，检查是否包含搜索词
      String(value).toLowerCase().includes(searchInput.toLowerCase())
    )
  );

  return (
    <>
      {/* 修复input标签，添加受控值绑定 */}
      <input 
        type="text" 
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)} 
        placeholder="搜索车辆信息..."
      />
      {/* 渲染过滤后的结果 */}
      <div style={{ marginTop: '20px' }}>
        {filteredCars.map((car, index) => (
          <div key={index} style={{ padding: '10px', border: '1px solid #eee', marginBottom: '10px' }}>
            <p>颜色：{car.color}</p>
            <p>类型：{car.type}</p>
            <p>注册日期：{car.registration.toLocaleDateString()}</p>
            <p>载客量：{car.capacity}</p>
          </div>
        ))}
      </div>
    </>
  );
}

export default CarSearch;

关键修复点说明 #

• 过滤逻辑：使用some()替代includes()，遍历每个对象值并检查是否包含搜索子串；通过String(value)将所有值转为字符串，兼容日期和数字类型；统一转为小写实现大小写不敏感搜索。
• 受控输入：添加value={searchInput}使输入框与组件状态同步，避免状态不一致问题。
• JSX修正：闭合input标签，符合JSX语法规范。
• 渲染元素：在map中返回具体的JSX元素，展示车辆详情，并添加key属性满足React列表渲染要求。
• 空搜索处理：当输入为空时，所有车辆都会被显示，因为任何字符串都包含空串。

内容的提问来源于stack exchange，提问作者The Dead Man