Tengo un pequeño problema con el uso de React y sus ganchos. Estoy tratando de imprimir una matriz desde una API, pero primero se imprime como una matriz vacía en la consola, y luego, solo cuando hago clic en el botón nuevamente, imprime la matriz.
Aquí está la función que estoy usando para hacer la matriz a partir de datos API:
const getChampion = () => { for(let i = 0; i < getData.length; i++){ let individualChamp = champPeep.current.value; if(getData[i].Name === individualChamp){ // console.log(getData[i]); setShowChampion(individualChamp); setChampionTitle(getData[i].Title); let hitPoints = getData[i].Hp let attack = getData[i].Attack; let defense = getData[i].Defense; let attackRange = getData[i].AttackRange; let armor = getData[i].Armor; setRadarData([hitPoints, attack, defense, attackRange, armor]); console.log(radarData) //returns empty array don't know why } } //! Have to click search twice to update array to new array } //Get Champion name and check to see if it is found in the APIAquí está el botón del campo de entrada que asigné a esta función:
return( <div> <div className='search'> <input ref={champPeep} type="search" id='champion-search' placeholder='eg Annie' /> </div> <button onClick={getChampion} className='btn-prim'>Search</button> </div> ) Y esto es lo que se registra en la consola cuando hago clic en el botón btn-prim :
[] Y cuando hago clic en el botón btn-prim nuevamente, esto se registra (lo cual es correcto):
(5) [524, 2, 3, 625, 19]¿Hay algo que estoy haciendo mal?
setState es asíncrono en reaccionar, por lo que cuando intenta registrar radarData inmediatamente después de setRadarData , muestra los datos anteriores almacenados en radarData . Puede usar useEffect hook para registrar el estado actual de radarData
useEffect(() => { console.log(radarData) }, [radarData])por qué React setStates son asíncronos: ¿Por qué setState en reactjs Async en lugar de Sync?
Sugiero que en lugar de usar
console.log(radarData) //returns empty array don't know why
intente agregar el useEffect para registrar el valor de radarData cada vez que cambie.
Usa algo como:
useEffect(() => {console.log(radarData)}, [radarData])Las actualizaciones de estado se reflejarán en su próximo renderizado y no inmediatamente. Esto ya se ha solucionado.
Básicamente tu
setRadarData([hitPoints, attack, defense, attackRange, armor]); console.log(radarData) //returns empty array because its still using the default state {}.Consulte El método set useState no refleja un cambio inmediatamente .