1
  1. Tengo un componente Results que hace un fetch a la api de pokemon envía en el componente Card el resultado del fetch en la prop pokemons

  2. En el componente Card recibo la información y hago otro fetch con el nombre del pokemon, este componente muestra la imagen y el nombre del Pokémon Ahora al hacer click sobre sobre las imagenes de la izquierda, quiero mostrar los detalles de ese pokemon en el lado derecho, para eso hice un contexto

  3. En la carpeta contexts/searchingNameContext Cuando le doy click en Card.js a cada pokemon actualiza el estado mediante las funciones actualizadoras que estan en el cotext

  4. Tengo un componente llamado Searching.js y quiero introducir el nombre de un pokemon y mostralo en la parte derecha para eso quiero actualizar el estado global con las mismas funciones

  5. Ahora cuando cargo la pagina, hago click sobre algun pokemon se muestar al lado derecho los detalles de ese pokemon, ahora escribo el nombre de de un pokemon en el imput y efectivamente muestra el detalle del pokemon que escribí.

pero si vuelvo a hacer click en alguno de los elementos del lado izquierdo ya no funciona y muestra

index.js:1 Warning: Cannot update a component (SearchingNameProvider) while rendering a different component (Searching). To locate the bad setState() call inside Searching Adjunto el repositorio por si desean echarle un ojo

===> https://github.com/jhonfe64/api.git

Gracias por la ayuda

//componente Searching

import React, {useState, useEffect, useContext} from 'react';
import styled from 'styled-components';
import {SearchingNameContext} from '../contexts/SearchingNameContext';


const Searching = () => {
    
    //lo que hay que hacer es actualizar los estados globales
    let {searchingName, changeSearchingName} = useContext(SearchingNameContext);
    let {pokemonType, changePokemonType} = useContext(SearchingNameContext);
    let {pokemonId, changePokemonId} = useContext(SearchingNameContext);
    let {pokemonImage, changePokemonImage} = useContext(SearchingNameContext);
    let {pokemonAbilities, changePokemonHabilities} = useContext(SearchingNameContext);

    const [btnClick, setBtnClick] = useState(false);
    const [inputValue, setInputValue] = useState('');
    const [fullInputvalue, setFullInputValue] = useState('');
    const [pokemon, setPokemon] = useState();

    const handleInputValue = (e) => {
        setInputValue(e.target.value);
    }

    const handleClick = (e) => {
        setBtnClick(true);
        e.preventDefault();
        setFullInputValue(inputValue);
    }
  
    useEffect(()=>{
        if(btnClick === true){
            fetch(`https://pokeapi.co/api/v2/pokemon/${fullInputvalue}`)
        .then((res)=>{
            return res.json();
        }).then((singlePokemon)=>{
            setPokemon(singlePokemon);
        })
        }
    },[btnClick, inputValue, fullInputvalue]);
 

    return (
        <div>
            <SearchingPokemons>
                {
                    btnClick === true && pokemon ?(
                        changeSearchingName(pokemon.name),
                        changePokemonType(pokemon.types[0].type.name),
                        changePokemonId(pokemon.id),
                        changePokemonImage(pokemon.sprites.front_default),
                        changePokemonHabilities(pokemon.abilities)
                    )
                    
                     : ""
                }
                
                <PokemonInput onChange={handleInputValue} value={inputValue} placeholder="Search" type="text"/>
                <PokemonBtn onClick={handleClick}>Search</PokemonBtn>
            </SearchingPokemons>
        </div>
    );
}


const SearchingPokemons = styled.form`
    display: flex;
`
const PokemonInput = styled.input`
    width: 95%;
    padding: 8px;
    border-radius: 5px 0px 0px 5px;
    border: 2px solid #ecf0f1;
    border-right: none;
    &:focus {
        outline: none;
    }
`

const PokemonBtn = styled.button`
    background: red;
    border: none;
    width: 15%;
    color: #ffffff;
    border-radius: 0px 5px 5px 0px;
    &:focus {
        outline: none;
    }
`



export default Searching;

introducir la descripción de la imagen aquí

2
  • 1
    Parece que no se puede actualizar el estado de contexto en render time (dentro del return), el problema parece estar en la lógica del operador ternario dentro de <SearchingPokemons>, ahi dentro se esta tratando de cambiar el estado en render time (dentro del return), yo intentaría hacer esa lógica fuera del return, de alguna forma.
    – g.4
    Commented el 4 may. 2021 a las 19:16
  • 1
    De acuerdo con @g.4, no veo que el operador ternario renderize JSX, podrías intentar un useEffect fuera del return
    – davidbug
    Commented el 5 may. 2021 a las 10:56

1 respuesta 1

0

El problema se puede deber a que se estan llamando funciones setter en render time(dentro del return), las funciones de este tipo, van usualmente dentro de una funcion handler, fuera del return.

Se puede llamar a estas funciones y hacer el cambio de las variables de contexto, en el primer useEffect (donde se hace fecth), descartando el estado pokemon(no es necesario):

useEffect(()=>{
        if(btnClick === true){
            fetch(`https://pokeapi.co/api/v2/pokemon/${fullInputvalue}`)
        .then((res)=>{
            return res.json();
        }).then((singlePokemon)=>{
            console.log("in fetch")
            //setPokemon(singlePokemon);
            changeSearchingName(singlePokemon.name)
            changePokemonType(singlePokemon.types[0].type.name)
            changePokemonId(singlePokemon.id)
            changePokemonImage(singlePokemon.sprites.front_default)
            changePokemonHabilities(singlePokemon.abilities)
        })
        }
    },[btnClick, inputValue, fullInputvalue]);

Hay que eliminar esta pieza de código para que lo anterior funcione:

 <SearchingPokemons>
                {/* eliminar esto
                    btnClick === true && pokemon ?(
                        changeSearchingName(pokemon.name),
                        changePokemonType(pokemon.types[0].type.name),
                        changePokemonId(pokemon.id),
                        changePokemonImage(pokemon.sprites.front_default),
                        changePokemonHabilities(pokemon.abilities)
                    )
                    
                     : ""
                    */ }
                
                ...
            </SearchingPokemons>

Ahora, el useEffect se va a quejar por que faltan dependencias (todas las funciones setter de SearchingNameContext), lo que yo haría es crear una sola función que haga la actualización de todas esas variables en SearchingNameContext, para solo listar una función setter en las depenencias de useEffect.

Espero que esta respuesta sea de ayuda.

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.