Tengo una variedad de productos dentro de la variable filteredProducts y quería ordenarlos según el precio y los productos recién agregados. Cuando se usa prevState de esta manera sin tener { } en la función de devolución de llamada, el código funciona bien.
useEffect(() => { if(sort === "newest") { setFilteredProducts((prevState) => [...prevState].sort((a, b) => a.createdAt - b.createdAt) ); } else if (sort === "asc") { setFilteredProducts((prevState) => [...prevState].sort((a ,b) => a.price - b.price) ); } else { setFilteredProducts((prevState) => [...prevState].sort((a, b) => b.price - a.price) ); } }, [sort]); Pero cuando se usa { } para la función de devolución de llamada prevState como esta
if(sort === "newest") { setFilteredProducts((prevState) => { [...prevState].sort((a, b) => a.createdAt - b.createdAt) }); }, solo arroja un error en la consola.
Cuando usa los corchetes, está declarando el cuerpo de una función y necesita devolver un valor, es decir, el siguiente estado. Las funciones de flecha sin un cuerpo de función utilizan un retorno implícito ( frente a explícito ).
setFilteredProducts((prevState) => { return [...prevState].sort((a, b) => a.createdAt - b.createdAt); });