0
148
Vistas¿Cómo ordenar la prestación de productos por valor?
Tengo una variedad de products de objetos como
[{name: 'apple', value: 100}, {name: 'watermelon', value: 200}, {name: 'orange', value: 50}] y una entrada de selección con "Precio alto" y "Precio bajo". precio" opciones, pero no funciona:
function ProductsPage() { const [products, setProducts] = useState([]) useEffect(() => {/*here i setProducts([...]) array of objects which i get of backend*/}) const orderShowing = (e) => { let actual_show = products let newOrder = e.target.value; if (newOrder === "High price") { actual_show.sort((a, b) => (b.value > a.value) ? 1 : (a.value > b.value) ? -1 : 0) } else if (newOrder === "Low price") { actual_show.sort((a, b) => (a.value > b.value) ? 1 : (b.value > a.value) ? -1 : 0) console.log(actual_show) setProducts(actual_show) } return ( <div> <select id="productsOrder" onChange={orderShowing}> <option>High price</option> <option>Low price</option> </select> <h2>Products</h2> {products.map((p) => { return <p>{p.name}</p>})} </div> ) } el console.log en realidad es lo que quiero (la ordenación funciona), pero la página no se actualiza con la matriz de products 'nuevos'
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Primero necesitas hacer una copia de tu state :
let actual_show = [...products];Luego intenta ordenarlo como si estuviera usando:
import { useEffect, useState } from "react"; export default function App() { const [products, setProducts] = useState([ { name: "apple", value: 100 }, { name: "watermelon", value: 200 }, { name: "orange", value: 50 } ]); const orderShowing = (e) => { let actual_show = [...products]; let newOrder = e.target.value; if (newOrder === "High price") { actual_show.sort((a, b) => a.value - b.value); } else if (newOrder === "Low price") { actual_show.sort((a, b) => b.value - a.value); } setProducts(actual_show); }; return ( <div> <select id="productsOrder" onChange={orderShowing}> <option>High price</option> <option>Low price</option> </select> <h2>Products</h2> {products.map((p) => { return <p>{p.name}</p>; })} </div> ); } 
·
Juan Pablo Isaza
Denunciar
0
Aquí está el ejemplo de trabajo con cambios mínimos en el código existente. Ejecute el código aquí
export default function App() { const [products, setProducts] = useState([]); useEffect(() => { setProducts([ { name: 'apple', value: 100 }, { name: 'watermelon', value: 200 }, { name: 'orange', value: 50 } ]); }, []); const orderShowing = e => { let actual_show = products.slice(); //making a copy of products let newOrder = e.target.value; if (newOrder === 'High price') { actual_show.sort((a, b) => b.value > a.value ? 1 : a.value > b.value ? -1 : 0 ); } else if (newOrder === 'Low price') { actual_show.sort((a, b) => a.value > b.value ? 1 : b.value > a.value ? -1 : 0 ); } console.log(actual_show); setProducts(actual_show); }; return ( <div> <select id="productsOrder" onChange={orderShowing}> <option>High price</option> <option>Low price</option> </select> <h2>Products</h2> {products.map(p => { return <p>{p.name}</p>; })} </div> ); }
·
Juan Pablo Isaza
Denunciar
0
Ejecuté tu código. Simplemente olvidó las llaves en p.name cuando lo asignó; de lo contrario, se tratará como una cadena. Debería ser {p.name}.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta