Verwenden Sie React, um Filterfunktionen zu schreiben

Question

Ich möchte eine Filterfunktion erstellen, die ausgelöst wird, wenn ein Eingabewertereignis in „react useState“ empfangen wird, aber wenn ich mit der Eingabe beginne, sehe ich nichts. Dies ist meine Suchkomponente

Exportfunktion Search({categories, onSearch}){
    const [searchText, setSearchText] = useState('');

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


    zurückkehren (
        <div className="flex items-center">
        <form className='flex space-x-1' >
         <Eingabe
                     type="text"
                     className="block w-full px-4 py-2 text-purple-700 bg-white border abgerundet-voll focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring -Opazität-40"
                     placeholder="Suchen..."
                     value={searchText}
                     onChange={handleInputChange}
                    />
       
        </form>
        </div>
    )
}

Dann verwenden Sie hier

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

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

  zurückkehren (
    <div>
      {/* ... */}
      <Suchkategorien={categories} onSearch={handleSearch} />
      {/* ... */}
      {Kinder}
    </div>
  );
};

Standardlayout exportieren;

Dann wird diese Komponente in der Home-Komponente verwendet

Standardfunktion exportieren Home({ Beiträge, Kategorien }) {

  zurückkehren (
    <Layout-Kategorien={categories}>
      <div className="mt-20">
        <main className="flex flex-col justify-center items-center h-screen pt-10 pb-30">
          {/* Beitrag rendern */}
        </main>
      </div>
    </Layout>
  );
}

Muss ich irgendetwas tun, damit es funktioniert?

Answer 1

在Layout组件中，你正在将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;

(filteredCategories没有被使用，这让你感觉什么都没有发生)