Soy un principiante, estoy tratando de hacer un juego de memoria. Este componente obtiene datos para una API y luego los recorta solo con el enlace de imagen.
luego, en el nivel uno, debería mostrar 3 imágenes aleatorias de los datos de búsqueda que siempre mostró Chars: [indefinido, indefinido, indefinido]
constructor(props) { super() this.state = { level: 1, numImg: 1*3, displayedChars: [], chars: [] } } async componentDidMount() { await this.loadData().then(data => { this.setState({ chars: this.trimData(data) }); }); await this.displayChars().then(data => { console.log(data) this.setState({ displayedChars: data }); }); console.log(this.state); } async loadData() { try { const res = await fetch(`http://hp-api.herokuapp.com/api/characters`) const characters = await res.json(); return characters } catch(err) { console.error(err) } } trimData(characters) { const listChars = [] characters.map(char => { if(char.image !== "") { listChars.push(char) } }) return listChars } displayChars() { return (new Promise((resolve) => { const list = [] for(let x=1; x<= this.state.numImg; x++) { let randomNum = Math.floor(Math.random() * 24); list.push(this.state.chars[randomNum]); } console.log(list) resolve(list) })) }en this.displayChars() console.log(data) funciona bien pero
this.setState({ displayedChars: data });luego console.log(this.state) SALIDA: [indefinido, indefinido, indefinido]
setState es asíncrono, por lo que no puede ver los estados actualizados inmediatamente, es por eso que su console.log es [undefined, undefined, undefined] . Puede asignar variables para manejar las respuestas por separado en lugar de usar this.state .
La segunda preocupación es que no debe mezclar then y async/await. Preferiría usar async/await solo en su caso.
async componentDidMount() { const chars = await this.loadData(); const displayedChars = await this.displayChars(); this.setState({ displayedChars: displayedChars chars: this.trimData(chars) }); //states are not updated right away //console.log(this.state); //access via variable console.log({ chars, displayedChars }) }