Estoy tratando de mostrar una lista plana de números como esta: (imagen de cómo se vería la lista plana) Para hacer eso, hice una matriz 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 reaccionar es recuperar el bucle sin mostrar el componente. Esto hace un bucle infinito y tengo el error de renderizado demasiado.
Esto es lo que muestra console.log(nums) (captura de pantalla de la consola)
y así es como estoy tratando de representar la matriz:
if(!fontsLoaded) {return <AppLoading />} else {return ( <View> <FlatList showsHorizontalScrollIndicator={false} horizontal={true} data={numbers} //la data qu'on va afficher renderItem={({ item }) => ( <Text style={styles.number}>{item.numberName}</Text> )} //la fonction qu'il va rendre /> </View> )}¿Por qué tengo el error de demasiados renderizados y cómo lo soluciono?
let [numbers, setNumbers] = useState([]); useEffect(()=>{ const nums = numbers.map((value,index)=> {numberName: index,key: index}) setNumbers([...numbers, ...nums]) },[])Debe hacer cosas relacionadas con la asignación/estado dentro del gancho useEffect .
Para tener en cuenta los cambios en los estados, deberá hacerlo con useState hook, así:
const number = props.numberProp; let [numbers, setNumbers] = useState([]); useEffect(() => { let nums = []; for (let i = 0; i < number + 100; i++) { nums.push({ numberName: i, key: i }); } setNumbers((numbers) => [...numbers, ...nums]); }, [])