在 React.js 搜索组件中按类别过滤项目”

Question

我正在尝试在我的 React.js 应用程序中实现搜索功能，允许用户搜索特定类别中的项目。 我有一个项目列表和一个类别列表，我希望搜索结果只包含属于所选类别的项目。

这是我尝试过滤项目的搜索组件的代码：

import React, { useState } from 'react';

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

  const handleSearch = (e) => {
    const searchTerm = e.target.value;
    const filteredItems = items.filter((item) => {
      return item.category === selectedCategory && item.name.includes(searchTerm);
    });
    setSearchResults(filteredItems);
  }

  return (
    <div>
      <select onChange={(e) => setSelectedCategory(e.target.value)}>
        {categories.map((category) => (
          <option key={category.id} value={category.id}>{category.name}</option>
        ))}
      </select>
      <input type="text" onChange={handleSearch} />
      <ul>
        {searchResults.map((result) => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Search;

我一直在尝试使用 filter 方法根据项目的类别过滤项目，但我不确定如何正确实施它。 我已经尝试将 selectedCategory 作为 prop 传递给 Search 组件并在 filter 方法中使用它，但它似乎没有用。 handleSearch function 在用户输入字段时被调用，它应该根据所选类别和用户输入的搜索词过滤项目。

任何人都可以帮助我理解我在这里做错了什么以及如何根据我的 React.js 应用程序中的选定类别正确过滤项目？ 任何帮助将不胜感激。

Answer 1

试试这个代码：

import React, { useState } from 'react';

const Search = ({ items, categories }) => {
    const [searchResults, setSearchResults] = useState([]);
    const [selectedCategory, setSelectedCategory] = useState(1);

    const handleSearch = (e) => {
        const searchTerm = e.target.value;
        if (searchTerm) {
            const filteredItems = items.filter((match) => {
                const regex = new RegExp(`${searchTerm}`, 'gi');
                return match.name.match(regex) && match.category === Number(selectedCategory);
            });
            setSearchResults(filteredItems);
            return;
        }
        setSearchResults([]);
    };

    return (
        <div>
            <select onChange={(e) => setSelectedCategory(e.target.value)}>
                {categories.map((category) => (
                    <option key={category.id} value={category.id}>{category.name}</option>
                ))}
            </select>
            <input type="text" onChange={handleSearch} />
            <ul>
                {searchResults.length > 0 && searchResults.map((result) => (
                    <li key={result.id}>{result.name}</li>
                ))}
            </ul>
        </div>
    );
};

export default Search;

在搜索任何内容之前，您必须先输入 select 某个类别，或者您可以为所选类别设置默认值。

不要将selectedCategory作为道具，而是将其作为 state。因为您在搜索组件中选择类别的选项，而不是其他组件。