Soy nuevo en React. Intento consultar la pokeapi usando useEffect, la idea es que el estado "draw" cambie a true o false según si el componente resultPk ha cambiado, si es true quiero que se ejecute el componente Card y si es false que no se ejecute. Pero hay un problema cuando el estado anterior de "draw" es true y resultPk ha cambiado, useEffect no se ejecuta primero, use Effect se ejecuta después del Card
import React, { useState, useEffect} from 'react'
import Card from '../../components/Cards/Cards'
import axios from 'axios';
const Search =() =>{
const [nombrePk,setPokemon] = useState('')
const [resultPk,setResulPk] = useState({});
const [draw,setDraw] = useState(false);
const handleChangeNamePk = (event)=>{
setPokemon(event.target.value)
}
const handleSubmit = async (event) =>{
event.preventDefault();
}
const handleApiPk = async () => {
try{
let result = await axios.get(`https://pokeapi.co/api/v2/pokemon/${nombrePk}`)
console.log('resul',result)
if(result.data){setResulPk(result.data)
console.log('resul',result)}else{setResulPk({}) }
}catch(e){
console.error(e)
setResulPk({})
}
}
useEffect (()=>{
console.log('--- ejecuto useEffect ---')
if(resultPk.hasOwnProperty('name'))setDraw(true)
else setDraw(false)
},[resultPk])
return(
<div className='formPokemon'>
<form onSubmit={handleSubmit}>
<label>Pokemon : </label>
<input type='text' name='namepokemon' onChange={handleChangeNamePk}/>
<button type='submit' onClick={handleApiPk}>buscar</button>
</form>
{draw===true?<Card infoPk={resultPk} />:''}
</div>
);
}
export default Search;
Este es el código del componente Card
import React from 'react';
import './Cards.css'
const Card = (props) =>{
/* console.log(props.infoPk) */
console.log('** ejecuto componente cards**')
return(
<div className="box">
<p>{props.infoPk.name}</p>
<img src={props.infoPk.sprites.front_default} alt='pokemon'/>
</div>
);
}
export default Card;
Cuando se ejecuta primero el componente Card antes que el useEffect falla la ejecución porque Card no es capaza de encontrar los datos a mostrar
Para mostrar que se ejecuta primero Card y luego useEffect voy a controlar la falta de datos en el controlador Card. He añadido un "?" en <img src={props.infoPk.sprites?.front_default} alt='pokemon'/>
import React from 'react';
import './Cards.css'
const Card = (props) =>{
/* console.log(props.infoPk) */
console.log('** ejecuto componente cards**')
return(
<div className="box">
<p>{props.infoPk.name}</p>
<img src={props.infoPk.sprites?.front_default} alt='pokemon'/>
</div>
);
}
export default Card;
Como indico arriba soy nuevo en React si alguien me puede echar una mano con este problema estaría agradecido.
Un saludo
Gracias
result.data
?