Estoy tratando de revertir una serie de objetos que importo desde un archivo js. En este momento, solo funciona cuando coloco la matriz directamente en mi componente donde quiero mostrar esos datos, no cuando los importo desde otro archivo. No puedo entender cuál es el problema, avíseme si necesito proporcionar información adicional.
Tengo datos construidos así en un archivo js:
const projects = [ { id: 1, title: "React Tv-show App", url: "url", image: "image", }, { id: 2, title: "React Landing Page", url: "url", image: "image", }, etc..] export default projects;Mi componente donde quiero mostrar e invertir esos datos se ve así:
import data from "./projects"; export default function ProjectsView() { const projects = data.reverse(); return ( <div className="projectsView"> <h1 className="projectsTitle">Projects</h1> <div className="projectsRow"> {projects.map((project) => { return ( <Project key={project.id} title={project.title} url={project.url} image={project.image} /> ); })} </div> </div> ); }También probé con projects.reverse().map() en el renderizado, pero tampoco funcionó.
El resultado no es el esperado porque reverse() invierte la matriz en su lugar. Lo que significa que no crea una copia invertida, sino que invierte el receptor (matriz en la que llama al método). Entonces data se invierten para cada renderizado que se realiza.
Si llama a reverse() dos veces, terminará con el pedido original. Entonces, la cantidad de renders determina el orden. Si el componente se representa un número impar de veces, la matriz se invierte, si se representa un número par de veces, la matriz tendrá el orden original.
Para evitar que esto suceda, no debe mutar la matriz original, sino crear una copia invertida. Esto significaría cambiar lo siguiente:
const projects = data.reverse();
Debiera ser:
const projects = Array.from(data).reverse(); Esto primero crea una copia superficial, que luego se invierte. Dado que nunca cambia/muta data , cada procesamiento producirá el mismo resultado, independientemente de cuántas veces se llame.
El gancho useMemo también se puede utilizar para aumentar el rendimiento.
const projects = useMemo(() => Array.from(data).reverse(), [data]); Esto reutilizará el resultado de Array.from(data).reverse() siempre que los data permanezcan iguales. Sin el gancho useMemo , se debe hacer una copia invertida para cada renderizado que se haga.
array.reverse() invierte una matriz en el lugar, por lo que su matriz se invierte en cada renderizado.
Utilice const projects = [...data].reverse(); en cambio. Esto creará una nueva matriz en lugar de mutar su matriz existente.