Estoy creando una matriz de indexes en los que estoy agregando valores (esto luego se usará en una función de mapa).
let indexes = []; export default function SortTiles() { let num = info.num_tiles; for (let i = 10; i < num+10; i++) { indexes = [...indexes, i]; } console.log(indexes); console.log("UWU") return( <div id={"sort-tiles"}> {/*{indexes.map(makeTiles)}*/} </div> ) }Pero cuando intento consolar. registrar mi matriz, esta es la salida que obtengo: La imagen de salida La salida se imprime dos veces y los números en la matriz también se duplican.
No estoy seguro de qué está tratando de lograr, pero esta no es la forma adecuada de manejar matrices o cualquier dato en el componente de reacción.
Intente esto, puede ser que esto lo ayude o podría solucionar su problema.
import {useState, useEffect} from 'react'; export default function SortTiles() { const [indexes, setIndexes] = useState([]); useEffect(() => { let num = 20; let indexArr = [] for (let i = 10; i < num+10; i++) { indexArr = [...indexArr, i]; } setIndexes(indexArr); }, []) return( <div id={"sort-tiles"}> {indexes.map((ind) => (<div>{ind}</div>))} </div> ) }Lo más probable es que la matriz se imprima dos veces porque está en modo estricto , que duplica los componentes para ayudar a detectar errores.
¡Por suerte para ti, te ayudó a atrapar uno! Los valores están duplicados porque la variable de indexes se declara fuera de la función. Dado que nunca lo restablece a un valor vacío, cada renderizado continuará agregando índices. Intente inicializarlo dentro de la función.