0
254
VistasCómo usar .filter dentro del componente ReactJs
Estoy usando React por primera vez y estoy tratando de filtrar una respuesta JSON para poder mostrar una lista de productos.
Cuando registro el resultado del filtro en la consola, parece que obtengo los datos correctos. Sin embargo, cuando intento mapearlo y renderizarlo, ".Products" parece no estar definido.
import React, { useContext } from 'react'; import { MenuContext } from '../context/menuContext'; function Category() { const [categoryItems] = useContext(MenuContext); const category = categoryItems.filter(element => element.CategoryName == "Rice"); console.log(category); return ( <div> <h1>Category Page</h1> {category.Products.map(productItem => ( <h3 key={productItem.Id}>{productItem.ProductName}</h3> ))} </div> ); } export default Category;Actualización: Gracias @Ori Drori por tu comentario. He intentado usar .find y todavía no funciona.
Creo que esto tiene algo que ver con cómo funciona reaccionar. Porque en la consola obtengo una salida vacía antes de obtener el resultado correcto.
Actualización 2: implementé la respuesta que marqué como correcta y ahora funciona. SIN EMBARGO. Hay dos cosas que no entiendo y me gustaría que alguien me explicara.
- cuando llamo
console.log(console.log(categoría);
¿Por qué en la consola veo 'indefinido' antes de obtener el resultado con los datos?
- ¿Por qué necesito poner 'categoría &&' cuando lo elimino? Deja de funcionar.
2 Respuestas
Responde la pregunta0
category es una lista, no un solo objeto. La salida de un Array.filter es siempre una lista. Por eso: category.Product is undefined .
Si desea encontrar una categoría con el nombre Rice , puede cambiar el código a:
import React, { useContext } from "react"; import { MenuContext } from "../context/menuContext"; function Category() { const [categoryItems] = useContext(MenuContext); const category = categoryItems.find( (element) => element.CategoryName === "Rice", ); // change `filter` to `find` and `==` to `===` console.log(category); return ( <div> <h1>Category Page</h1> {category && // add this because category can be undefined category.Products.map((productItem) => ( <h3 key={productItem.Id}>{productItem.ProductName}</h3> ))} </div> ); } export default Category;Si sigue sin funcionar muestra el error y también console.log categoría.Productos
0
Cuando usó el filtro de método, regresa como una matriz:
category.map(()=>)o use el método para encontrar el producto del artículo en la categoría:
const find = category.find(elem=>elem.product) find.map(()=>)