Я начинаю с реакции, и я работаю над pokedex, используя pokeApi, нашел видео с кем-то, кто это делает, и я приспособился к своей идее, но у меня проблема с повторным рендерингом компонента ... поместите панель навигации слева, когда я щелкаю по карте покемона, справа отображается компонент со всей информацией об этом покемоне
Когда я щелкаю по другому покемону, маршрут меняется, но тот же компонент все еще там Мне нужно обновить страницу, чтобы получить действительного покемона, соответствующего маршруту
, это мой код из приложения. js и код от pokemonCard (PokemonTarjeta) внутри моей панели навигации
Приложение. js
render(){
return (
<Router>
<div className = "App">
<NavBar />
<Switch>
<Route exact path="/:pokemonIndex" component={Pokemon}/>
</Switch>
</div>
</Router>
);
}
}
PokemonCard. js
state = {
name: '',
imageUrl: '',
pokemonIndex: '',
imageLoading: true,
toManyRequest: false
};
componentDidMount(){
const {name, url} = this.props;
const pokemonIndex = url.split("/")[url.split("/").length - 2];
const imageUrl = `https://github.com/pokeAPI/sprites/blob/master/sprites/pokemon/${pokemonIndex}.png?raw=true`;
this.setState({
name,
imageUrl,
pokemonIndex,
});
}
render(){
return (
<StyledLink to={`${this.state.pokemonIndex}`}>
<Tarjeta className="tarjeta">
<div className="card">
{this.state.imageLoading ? (<img src={spinner} style={{width:"5em", height:"5em"}}className="card-img-top rounded d-block mt-2" alt="Pokemon" />) : null}
<div className="card-body row">
<div className="col-md-4">
<Sprite
className="rounded mx-auto"
onLoad={() => this.setState({imageLoading : false})}
onError={() => this.setState({toManyRequest : true})}
src={this.state.imageUrl}
style={
this.state.toManyRequest ? {display: "none"} :
this.state.imageLoading ?
null : {display: "block"}
}>
</Sprite>
{this.state.toManyRequest ? (<h6 className="mx-auto"><span className="badge badge-danger mt-2">To many request</span></h6>) : null}
</div>
<div className="col-md-8 mt-4 mx-auto">
<h5 className="card-title">
{this.state.pokemonIndex}-
{this.state.name
.toLowerCase()
.split(" ")
.map(
letter => letter.charAt(0).toUpperCase() + letter.substring(1)
)
.join(" ")}
</h5>
</div>
</div>
</div>
</Tarjeta>
</StyledLink>
);
}
}
Это код Pokemon. js на случай Вам нужно
state = {
name: '',
pokemonIndex: '',
imageUrlFront: '',
imageUrlShiny: '',
types: [],
description: '',
stats: {
hp: '',
attack: '',
defense: '',
speed: '',
specialAttack: '',
specialDefense: ''
},
height: '',
weight: '',
eggGroup: '',
abilities: '',
genderRatioMale: '',
genderRatioFemale: '',
evs: '',
hatchSteps: ''
};
async componentDidMount() {
const {pokemonIndex} = this.props.match.params;
//url para pokemones
const pokemonUrl = `https://pokeapi.co/api/v2/pokemon/${pokemonIndex}/`;
const pokemonSpeciesUrl = `https://pokeapi.co/api/v2/pokemon-species/${pokemonIndex}/`;
//informacion del pokemones
const pokemonRes = await axios.get(pokemonUrl);
const name = pokemonRes.data.name;
const imageUrlFront = `https://projectpokemon.org/images/normal-sprite/${name}.gif`;
const imageUrlShiny = `https://projectpokemon.org/images/shiny-sprite/${name}.gif`;
let {hp, attack, defense, speed, specialAttack, specialDefense} = '';
pokemonRes.data.stats.map(stat => {
switch(stat.stat.name){
case 'hp': hp = stat['base_stat']; break;
case 'attack': attack = stat['base_stat']; break;
case 'defense': defense = stat['base_stat']; break;
case 'speed': speed = stat['base_stat']; break;
case 'special-attack': specialAttack = stat['base_stat']; break;
case 'special-defense': specialDefense = stat['base_stat']; break;
}
});
const height = Math.round((pokemonRes.data.height * 0.328084 + 0.0001) * 100) / 100;
const weight = Math.round((pokemonRes.data.weight * 0.220462 + 0.1) * 100) / 100;
let types = pokemonRes.data.types.map(type => type.type.name);
const abilities = pokemonRes.data.abilities.map(ability => {
return ability.ability.name.toLowerCase().split("-").map(s => s.charAt(0).toUpperCase() + s.substring(1)).join(" ");
});
const evs = pokemonRes.data.stats.filter(stat =>{
if (stat.effort > 0) {
return true;
}
else{ return false; }
}).map(stat =>{
return `${stat.effort} ${stat.stat.name}`.toLowerCase().split("-").map(s => s.charAt(0).toUpperCase() + s.substring(1)).join(" ");
}).join(', ');
await axios.get(pokemonSpeciesUrl).then(res =>{
let description = '';
res.data.flavor_text_entries.some(flavor =>{
if (flavor.language.name === 'es') {
description = flavor.flavor_text;
return;
}
});
const femaleRate = res.data['gender_rate'];
const genderRatioFemale = 12.5 * femaleRate;
const genderRatioMale = 12.5 * (8 - femaleRate);
const catchRate = Math.round((100/255) * res.data['capture_rate']);
const eggGroup = res.data['egg_groups'].map(group =>{
return group.name.toLowerCase().split("-").map(s => s.charAt(0).toUpperCase() + s.substring(1)).join(" ");
})
.join(', ');
const hatchSteps = 255 * (res.data['hatch_counter'] + 1);
this.setState({
description,
genderRatioFemale,
genderRatioMale,
catchRate,
eggGroup,
hatchSteps
});
});
this.setState({
name,
pokemonIndex,
imageUrlFront,
imageUrlShiny,
types,
stats:{
hp,
attack,
defense,
speed,
specialAttack,
specialDefense,
},
height,
weight,
abilities,
evs
});
}
Я пробовал разные вещи, но все еще не нашел решения ...