React を使用してフィルタリング関数を作成する

Question

react useState で入力値イベントを受信したときに起動するフィルター関数を作成したいのですが、入力を開始しても何も実行されていないことがわかります。これは私の検索コンポーネントです

エクスポート関数 Search({categories, onSearch}){
    const [searchText, setSearchText] = useState('');

    const filterカテゴリ = () => {
        const filteredCategories = category.filter(category =>
          category.name.toLowerCase().includes(searchText.toLowerCase())
        );
        onSearch(フィルターされたカテゴリ);
      };
    
      const handleInputChange = イベント => {
        setSearchText(event.target.value);
        フィルターカテゴリ();
      };


    戻る （
        <div className="flex items-center">
        <form className='flex space-x-1' >
         <入力
                     type="テキスト"
                     className="block w-full px-4 py-2 text-purple-700 bg-white borderrounded-full focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring -不透明度-40"
                     placeholder="検索..."
                     値={検索テキスト}
                     onChange={handleInputChange}
                    />
       
        </フォーム>
        </div>
    )
}

次に、ここで

を使用します

const Layout = ({ カテゴリ, 子 }) => {
  const [フィルターされたカテゴリ、セットフィルターされたカテゴリ] = useState(カテゴリ);

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

  戻る （
    <div>
      {/* ... */}
      <カテゴリを検索={カテゴリ} onSearch={handleSearch} />
      {/* ... */}
      {子供たち}
    </div>
  );
};

デフォルトのレイアウトをエクスポート;

このコンポーネントはホーム コンポーネントで使用されます

デフォルト関数のエクスポート Home({ 投稿, カテゴリ }) {

  戻る （
    <レイアウトカテゴリ={カテゴリ}>
      <div className="mt-20">
        <main className="flex flex-col justify-center items-center h-screen pt-10 pb-30">
          {/* 投稿をレンダリング */}
        </メイン>
      </div>
    </レイアウト>
  );
}

それを機能させるために何かすべきことはありますか?

Answer 1

Layout コンポーネントでは、categories の値を検索コンポーネントに渡しています。filteredCategories

を渡すこともできます。 リーリー

(filteredCategories は使用されていないため、何も起こらなかったように感じられます)