0

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

introducir la descripción de la imagen aquí

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;

introducir la descripción de la imagen aquí

Como indico arriba soy nuevo en React si alguien me puede echar una mano con este problema estaría agradecido.

Un saludo

Gracias

2
  • que es lo que contiene result.data?
    – hawks
    Commented el 6 jul. 2021 a las 15:48
  • result.data es el resultado que te devuelve la API, es un objecto JSON
    – juampi
    Commented el 7 jul. 2021 a las 8:26

1 respuesta 1

0

Ya está solucionado el problema era de lógica, en el ejemplo que puse no hay que controlar el estado del array, hay que controlar el estado del input text que es el que va variando

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.