React.js搜索组件按类别筛选条目问题求助

核心问题分析 #

1. 状态管理错误：selectedCategory作为props传入组件，但你在<select>的onChange里直接调用setSelectedCategory——这个函数既不是组件内部的state setter，也没作为props传入，导致切换类别时无法更新选中值，后续筛选逻辑自然失效。
2. 筛选触发时机不全：只有输入框变化时才执行筛选，切换类别时不会重新触发筛选，导致类别切换后搜索结果无法同步更新。
3. 初始结果为空：组件挂载时searchResults是空数组，不会显示当前选中类别下的所有条目，用户体验不佳。
4. 潜在类型不匹配：如果item.category存储的是类别对象（而非id字符串），item.category === selectedCategory的全等判断会失败，需要改成item.category.id === selectedCategory。

修复后的代码实现 #

根据状态管理的场景，提供两种方案：

方案1：组件内部维护类别选中状态（适合独立使用场景）

import React, { useState, useEffect } from 'react';

const Search = ({ items, categories }) => {
  // 组件内部维护状态
  const [selectedCategory, setSelectedCategory] = useState(categories[0]?.id || '');
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  // 统一筛选逻辑，依赖变化自动触发
  useEffect(() => {
    const filtered = items.filter(item => {
      // 根据实际数据结构调整：若item.category是对象则用item.category.id
      const matchesCategory = selectedCategory ? item.category === selectedCategory : true;
      const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase());
      return matchesCategory && matchesSearch;
    });
    setSearchResults(filtered);
  }, [items, selectedCategory, searchTerm]);

  return (
    <div>
      <select 
        value={selectedCategory}
        onChange={(e) => setSelectedCategory(e.target.value)}
      >
        <option value="">全部类别</option>
        {categories.map((category) => (
          <option key={category.id} value={category.id}>{category.name}</option>
        ))}
      </select>
      <input 
        type="text" 
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="搜索条目..."
      />
      <ul>
        {searchResults.map((result) => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Search;

方案2：父组件维护类别状态（适合多组件共享场景）

若selectedCategory需要在父组件或其他组件中复用，修改如下：

import React, { useState, useEffect } from 'react';

const Search = ({ items, categories, selectedCategory, onCategoryChange }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  useEffect(() => {
    const filtered = items.filter(item => {
      const matchesCategory = selectedCategory ? item.category === selectedCategory : true;
      const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase());
      return matchesCategory && matchesSearch;
    });
    setSearchResults(filtered);
  }, [items, selectedCategory, searchTerm]);

  return (
    <div>
      <select 
        value={selectedCategory}
        onChange={(e) => onCategoryChange(e.target.value)}
      >
        <option value="">全部类别</option>
        {categories.map((category) => (
          <option key={category.id} value={category.id}>{category.name}</option>
        ))}
      </select>
      <input 
        type="text" 
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="搜索条目..."
      />
      <ul>
        {searchResults.map((result) => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Search;

父组件调用示例：

const ParentComponent = () => {
  const [selectedCategory, setSelectedCategory] = useState('');
  // 假设已有items和categories数据
  return (
    <Search 
      items={items}
      categories={categories}
      selectedCategory={selectedCategory}
      onCategoryChange={setSelectedCategory}
    />
  );
};

额外优化点 #

• 加入大小写不敏感搜索：将搜索词和条目名称统一转小写，提升搜索容错性。
• 添加**"全部类别"选项**：允许用户不限制类别进行全局搜索。
• 给输入框添加placeholder提示，增强易用性。

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