Tengo este gancho useState:
const [products, setProducts] = useState([])y tengo estas funciones:
const sortByLow =()=>{ const newArray = products.sort((a,b)=>b.price-a.price) setProducts(newArray) console.log(newArray); } const sortByHigh =()=>{ const newArray = products.sort((a,b)=>a.price-b.price) setProducts(newArray) console.log(newArray); }un gancho useEffect:
useEffect(()=>{ const displayProducts = async()=>{ try { //fetch from server at port 3000 const response = await fetch('http://localhost:3000/') if(!response.ok){ throw new Error("displayProducts response is not ok") } const responseDataObject = await response.json() const allProducts = responseDataObject.data.allProducts setProducts(allProducts); } catch (error) { console.log("theres an error" + error); } } //call the function, duh displayProducts(); }, [])y el valor de retorno del componente es este:
<div> {products.filter( product => {return (product.price > lowPrice && product.price < highPrice)} ).map(productObj => <ProductComponent navigateToProduct = {productObj._id} navigateToCategory = {productObj.category} key = {productObj._id} name = {productObj.name} category = {productObj.category} price = {productObj.price} description = {productObj.description} image = {productObj.image} />)} </div>ahora espero que la matriz de productos cambie de acuerdo con las funciones anteriores, pero no sucederá por alguna razón. ¿Cual puede ser el problema? por favor ayúdenme gracias!
ok, lo descubrí gracias al comentario de @KonradLinkowski... La clasificación solo hace referencia a la matriz original, así que para crear una nueva matriz, debería haber escrito [...products] como la matriz de origen, de la siguiente manera:
const sortByLow =()=>{ const newArray = [...products].sort((a,b)=>b.price-a.price) setProducts(newArray) console.log(newArray); } const sortByHigh =()=>{ const newArray = [...products].sort((a,b)=>a.price-b.price) setProducts(newArray) console.log(newArray); }¡Gracias a todos los que leyeron y ayudaron!
Cuando ordena una matriz, no crea una nueva ID de referencia, por lo que no sabe actualizar el estado. Así es como puedes forzarlo a hacer una nueva referencia.
const sortByLow = () => { const newArray = [...products]; newArray.sort((a, b) => b.price - a.price); setProducts(newArray); console.log(newArray); }; const sortByHigh = () => { const newArray = [...products]; newArray.sort((a, b) => a.price - b.price); setProducts(newArray); console.log(newArray); };Esto debería actualizar el estado de reacción.