Gunakan React untuk menulis fungsi penapisan

Question

Saya mahu mencipta fungsi penapis yang menyala apabila peristiwa nilai input diterima dalam useState bertindak balas, tetapi apabila saya mula menaip, saya tidak dapat melihatnya melakukan apa-apa. Ini ialah komponen Carian saya

fungsi eksport Carian({kategori, onSearch}){
    const [searchText, setSearchText] = useState('');

    const filterCategories = () =>
        const filteredCategories = categories.filter(category =>
          category.name.toLowerCase().includes(searchText.toLowerCase())
        );
        onSearch(filteredCategories);
      };
    
      const handleInputChange = acara =>
        setSearchText(event.target.value);
        filterCategories();
      };


    kembali (
        <div className="flex items-center">
        <form className='flex space-x-1' >
         <masukan
                     type="text"
                     className="block w-full px-4 py-2 text-purple-700 bg-white border rounded-full focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring -kelegapan-40"
                     pemegang tempat="Cari..."
                     value={searchText}
                     onChange={handleInputChange}
                    />
       
        </form>
        </div>
    )
}

Kemudian gunakan

Const Layout = ({ kategori, kanak-kanak }) =>
  const [filteredCategories, setFilteredCategories] = useState(kategori);

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

  kembali (
    <div>
      {/* ... */}
      <Kategori carian={categories} onSearch={handleSearch} />
      {/* ... */}
      {anak-anak}
    </div>
  );
};

eksport Reka Letak lalai;

Kemudian komponen ini digunakan dalam komponen Laman Utama

eksport fungsi lalai Laman Utama({ posts, categories }) {

  kembali (
    <Kategori reka letak={categories}>
      <div className="mt-20">
        <main className="flex flex-col justify-center items-center h-screen pt-10 pb-30">
          {/* Paparkan siaran */}
        </utama>
      </div>
    </Layout>
  );
}

Adakah terdapat apa-apa yang perlu saya lakukan untuk menjadikannya berfungsi?

Answer 1

Dalam komponen Layout, anda meletakkan 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;

(filteredCategoriestidak digunakan, yang membuatkan anda berasa seperti tiada apa yang berlaku)