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
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
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
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
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;
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 delreturn
, de alguna forma.