Quería crear una aplicación web de comercio electrónico usando react-bootstrap. Quiero que la página muestre un artículo diferente según la categoría, por lo que si la URL es producto/ropa de hombre, quiero filtrar mi conjunto y mostrar solo el producto que tiene la misma categoría, que es ropa de hombre (mi ruta: producto/: categoría). Ya intenté filtrar mi matriz usando el método .filter pero no funcionó, todavía muestra todos los productos de varias categorías, ¿cómo puedo solucionarlo?
Página de productos categorizados:
const ProductList = () => { const { category } = useParams() const[productList, setProductList]= useState(); useEffect(() =>{ axios.get(`https://fakestoreapi.com/products`).then(res => { const products = res.data; setProductList(products); var filteredCategory = productList.filter((productList) =>productList.category === {category}) }) }, []); console.log(productList) return ( <> <Row> <h1> This is {category} paged</h1> {productList && productList.map(product =>{ const {id, title, price, category,description,image} = product; return( <Col lg={3} className="d-flex"> <Card key={id} className="flex-fill productlist"> <Card.Img variant="top" src={image} /> <Card.Body> <Card.Title>{title}</Card.Title> <Card.Text>{category}</Card.Text> <Card.Text> Current Price: {price} </Card.Text> <Button variant="primary">Add to cart</Button> </Card.Body> </Card> </Col> ) })} </Row> </> ) } export default ProductListEn la función de filtro que ha utilizado, intente escribirlo como
productList.filter((product) => product.category === category)Intenta deshacerte del {} alrededor de la variable de categoría en la función de filtro. La función de filtro no está dentro de la declaración de devolución y, por lo tanto, js simple (no jsx).
Además, nunca usa la matriz que contiene los productos filtrados. Sugeriría filtrar los productos que obtiene de axios, tomar los productos filtrados y ponerlos en estado con setProductList.
No pude probar esto ya que estoy en el móvil, pero pruébalo.
Primero, agregue una dependencia a su UseEffect y luego elimine el corchete dentro del filtro.
useEffect(() => { async function getByCategory(){ const req = await fetch(URL): const res = await req.json(); const filter = res.filter((item) => item.category === category); setProductList(filter); } // check if params exits if(category){ getByCategory(); } }, [category]);