Utiliser React pour écrire des fonctions de filtrage

Question

Je souhaite créer une fonction de filtre qui se déclenche lorsqu'un événement de valeur d'entrée est reçu dans React UseState, mais lorsque je commence à taper, je ne la vois pas faire quoi que ce soit. Ceci est mon composant de recherche

fonction d'exportation Recherche({catégories, onSearch}){
    const [searchText, setSearchText] = useState('');

    const filterCategories = () =>
        const filteredCategories = catégories.filter(catégorie =>
          catégorie.nom.toLowerCase().includes(searchText.toLowerCase())
        );
        onSearch (catégories filtrées);
      } ;
    
      const handleInputChange = événement =>
        setSearchText(event.target.value);
        filtreCatégories();
      } ;


    retour (
        <div className="flex items-center">
        <form className='flex space-x-1' >
         <entrée
                     type="texte"
                     className="bloc w-full px-4 py-2 texte-violet-700 bg-blanc bordure arrondie-pleine mise au point : bordure-violet-400 mise au point : anneau-violet-300 mise au point : contour-aucun mise au point : anneau mise au point : anneau -opacité-40"
                     placeholder="Rechercher..."
                     valeur={searchText}
                     onChange={handleInputChange}
                    />
       
        </formulaire>
        </div>
    )
}</pré>
<p>Ensuite, utilisez</p>
<pre class="brush:php;toolbar:false;">const Layout = ({ catégories, enfants }) =>
  const [filteredCategories, setFilteredCategories] = useState(categories);

  const handleSearch = (filteredCategories) =>
    setFilteredCategories(filteredCategories);
  } ;

  retour (
    <div>
      {/* ... */}
      <Catégories de recherche={categories} onSearch={handleSearch} />
      {/* ... */}
      {enfants}
    </div>
  );
} ;

exporter la mise en page par défaut ;

Ensuite, ce composant est utilisé dans le composant Accueil

exporter la fonction par défaut Accueil({ articles, catégories }) {

  retour (
    
      

        

          {/* Afficher le message */}
        
      
    
  );
}
Dois-je faire quelque chose pour que cela fonctionne ? 

Answer 1

Dans le composant Mise en page, vous placez categories的值传递给你的Search组件，你可能想要传递filteredCategories

const Layout = ({ categories, children }) => {
  const [filteredCategories, setFilteredCategories] = useState(categories);

  const handleSearch = (filteredCategories) => {
    setFilteredCategories(filteredCategories);
  };

  return (
    <div>
      {/* ... */}
      <Search
        categories={filteredCategories} // 这里
        onSearch={handleSearch}
      />
      {/* ... */}
      {children}
    </div>
  );
};

export default Layout;

(filteredCategoriesn'est pas utilisé, ce qui donne l'impression que rien ne se passe)