Cómo funciona useState bajo el capó si lo pongo dentro del bucle. Del siguiente fragmento de código obtengo una lista de un solo elemento. console.log(names) imprime 3 veces el valor de names :
primer procesamiento -> nulo
segundo y último render -> matriz completa (10 elementos)
Sé que setNames debe colocarse fuera del bucle for, pero me pregunto por qué representa la matriz 3 veces (esperaba solo 2) y por qué obtengo la lista ul/li de solo 1 elemento en lugar de 10.
const {useState, useEffect} = React; const url = 'https://api.github.com/users'; const Example = () => { let [names, setNames] = useState(null) let list = [] const getNames = async () => { let response = await fetch(url) let users = await response.json() for (let i = 0; i < 10; i++) { list.push(users[i].login) setNames(list) } } useEffect(() => { getNames() }, []) console.log(names); return ( <ul> {names && names.map((item, index) => { return ( <li key={index}>{item}</li> ) })} </ul> ) }; ReactDOM.render( <Example/>, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>Prueba esto. Agregue usuarios primero en una lista y después del ciclo, actualice el estado.
const getNames = async() => { const response = await fetch(url) const users = await response.json() let names = [] for (let i = 0; i < 10; i++) { names.push(users[i].login) } setNames(names) }