javascript - 如何在我的 react js 应用程序中实现搜索功能？

Question

我想在我的反应应用程序中实现搜索功能。

我正在使用带有filter() 方法的在线后端 API（商务 js），但我想要一种更好的方法。

const SearchPage = ({ products, onAddToCart, cart, searchedProducts }) => {
  //searchedProducts is the user searched term.

  return (
    <div className="content toolBar">
      <div />
      <Grid container justify="center" spacing={1}>
        {products
          .filter(
            (product) =>
              product.name.includes(searchedProducts) ||
              product.description.includes(searchedProducts)
          )
          .map(
            (product) =>
              product.inventory.available >= 1 && (
                <Grid item key={product.id} xs={6} sm={4} md={3} lg={2}>
                  <Product
                    product={product}
                    onAddToCart={onAddToCart}
                    cart={cart}
                  />
                </Grid>
              )
          )}
      </Grid>
    </div>
  );
};

export default SearchPage;

标签： javascriptreactjs