Estoy trabajando en un sitio de comercio electrónico en React que muestra una lista de elementos que se derivan de un archivo JSON. El archivo JSON incluye información como el precio, modelo, imagen, etc.
Estoy tratando de agregar la funcionalidad "Ordenar por: Precio" al sitio. La función que tengo ahora funciona correctamente al ordenar los datos JSON:
import products from "../data/products.json"; function Shop(){ const [items, setItems] = useState(); function sortProducts() { setItems(products.sort(sortByProperty("price"))); } function sortProductsReverse(){ setItems(products.sort(sortByProperty("price")).reverse); } return ( {products.map((product) => ( <React.Fragment> <Product {...product} /> </React.Fragment> ) } } sortByProperty hace la lógica de clasificación de menor a mayor, sortProducts ordena de menor a mayor, sortProductsReverse ordena de mayor a menor. Product es el componente que toma los datos JSON y muestra todo.
Cuando la página se carga por primera vez, todos los productos se muestran correctamente sin estar ordenados. Cuando se hace clic en un botón para sortProducts o sortProductsReverse , funciona. Sin embargo, solo funciona una vez. Los elementos no se pueden ordenar/renderizar de nuevo.
Creo que me falta algo en los items useState, pero no estoy seguro de qué debo hacer.
Para que su componente se vuelva a renderizar, debe establecer el estado con una nueva referencia de objeto , React luego compara el estado anterior y actual, y si no son iguales, vuelve a renderizar el componente.
En su caso, items inicialmente no están undefined , y cuando los configura como products , el componente se vuelve a representar.
Después de eso, cada vez que llamas a products.sort , establece items en el mismo objeto que antes, porque el método de sort en JavaScript muta el objeto original, pero no devuelve uno nuevo.
Para resolver el problema, cada vez que llame a setItems con un nuevo objeto:
setItems([...products].sort(sortByProperty("price")));