0
341
ViewsCómo arreglar mi filtrado de productos en React
La tarea es crear un componente Fiter.jsx que filtrará Products.jsx (puedes verlo en el repositorio)
Tengo React Componentes:
Principal.jsx
import React from "react"; import { Products } from "../Products"; import { Filter } from "../Filter"; import { Product } from "../Product"; class Main extends React.Component { state = { products: [], filteredProducts: [], status: "all", }; onFilterStatusChange = (status) => { this.setState({ status }); }; componentDidMount() { fetch("./products.json") .then((responce) => responce.json()) .then((data) => this.setState({ products: Object.values(data) })); } filterProducts() { this.setState(({ status }) => ({ filteredProducts: status === "all" ? this.state.products : this.state.products.filter((n) => n.prod_status.includes(status)), })); } componentDidUpdate(prevProps, prevState) { if (this.state.status !== prevState.status) { this.filterProducts(); } } render() { // const { products } = this.state; return ( <main className="container content"> <Filter title="Status:" values={["all", "recommended", "saleout", "bestseller", "new"]} value={this.state.status} onChange={this.onFilterStatusChange} /> <Products products={this.state.filteredProducts} /> </main> ); } } export { Main };Filtro.jsx
const Filter = ({ title, values, value, onChange }) => ( <div> <h3>{title}</h3> {values.map((n) => ( <label> <input type="radio" onChange={() => onChange(n)} checked={value === n} /> {n} </label> ))} </div> ); export { Filter };En esta etapa, la consola muestra un error y el sitio muestra lo siguiente:
Pregunta: ayuda a solucionar esto...
Repo con todos los archivos
Antes de intentar crear un filtro, el sitio se veía así:
1 answers
Answer question0
Oye, como otros han señalado que algunos products no tienen un prod_status , cambia n.prod_status.includes(status) a n.prod_status?.includes(status) en filterProducts , que está en el componente Main .
Una cosa más es que en el renderizado inicial muestra Nothing found pero el status está establecido en all . Debe mostrar todos los productos disponibles. Para corregir esto, cambie la condición this.state.status !== prevState.status en component.didUpdate to this.state.status !== prevState.status || this.state.products !== prevState.products .
Dado que en el primer valor de status de renderizado no cambiará, es decir. all excepto los cambios de producto de [] a [artículo...]. Entonces verifique si los productos han cambiado o no y luego ejecute la función filterProducts .
Por último, como el archivo products.json está en el directorio público, en la llamada de fetch debe escribir la ruta del archivo comenzando con / .