es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Error de demasiados renderizados al intentar mostrar un FlatList

29 Jul, 2023 Programación

Estoy tratando de mostrar una flatList de números de esta manera: (imagen de cómo se vería la flatList)
Para hacer eso, hice un array de objetos con un nombre de número y una clave, se genera con un bucle:

const number = 5;

let [numbers, setNumbers] = useState([]);

let nums = [];
for (let i = 0; i < number; i++) {
  nums.push({ numberName: i, key: i });

  console.log(nums)
}
setNumbers((numbers) => [...numbers, ...nums]);

No creo que el problema esté en el bucle, pero React está llamando al bucle sin mostrar el componente. Esto genera un bucle infinito y tengo el error de “demasiados rerenders”.

Esto es lo que muestra el console.log(nums) (captura de pantalla de la consola)

y así es como estoy intentando mostrar el array:

if (!fontsLoaded) {
  return <apploading></apploading>;
} else {
  return (
    <view>
      <flatlist showshorizontalscrollindicator="{false}" horizontal="{true}" data="{numbers}" renderitem="{({" item="" })=""> (
          <text style="{styles.number}">{item.numberName}</text>
        )}
      />
    </flatlist></view>
  );
}

¿Por qué tengo el error de “demasiados rerenders” y cómo lo soluciono?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema es que estás llamando a setNumbers dentro del bucle, lo que provoca una nueva renderización cada vez que se llama. Esto lleva a un bucle infinito y resulta en el mensaje de error “demasiadas renderizaciones”.

    Para solucionar este problema, mueve la llamada a la función setNumbers fuera del bucle:

    const number = 5;

let [numbers, setNumbers] = useState([]);

let nums = [];
for (let i = 0; i < number; i++) {
  nums.push({ numberName: i, key: i });
}

setNumbers([...numbers, ...nums]); // Mueve esto fuera del bucle

// El resto de tu código para renderizar el FlatList

    Al hacer esto, la función setNumbers solo se llama una vez después de que el bucle haya terminado de ejecutarse, lo que evita el bucle infinito y el mensaje de error de demasiadas renderizaciones.

Comments are closed.