Реагировать Как получить информацию из инструкции Get - PullRequest
0 голосов
/ 22 марта 2020

Здравствуйте, я создаю pokedex, и теперь я пытаюсь получить информацию о pokemon, на которую нажали. так что я получаю URl

http://localhost:3000/#/pokemon/Bulbasaur

попытку записать информацию о Бульбасуре, чтобы отобразить ее:

import React, { Component } from 'react';
import Pokemons from '../pokemon/pokedex.json';



class PokePath extends Component {

constructor(props) {
    super(props);
}


render() {
    const {id, num, name} = this.state
    return (
        <div className="row">        
                <div className="col">
                   <h1>{Pokemons[this.props.id-1].name}</h1>
                </div> 
        </div>
    );
}
}

export default PokePath;

Здесь я получаю данные:

[{
  "id": 1,
  "num": "001",
  "name": "Bulbasaur",
  "img": "http://www.serebii.net/pokemongo/pokemon/001.png",
  "type": [
    "Grass",
    "Poison"
  ],

]

Чтобы попасть на страницу бульбазаура, я сделал это:

                                return (
        <div className = "row">{Pokemons.map((postDetail, id) => {
            return(             
                <div className = "col-md-3 col-sm-6 mb-5">
                    <StyledLink to={`pokemon/${postDetail.name}`}>  
                        <div className = "card">
                            <div className = "card-header">
                            <div>
                                <a key={id}>{postDetail.id}</a>
                                    </div>
                                        <div className="text-center">
                                            <img src={postDetail.img} alt="new"/>
                                        </div>
                                    <div className="text-center">
                                        <a key={id}>{postDetail.name}</a>
                                    </div>
                            </div> 
                        </div> 
                    </StyledLink>   
                </div>); 
             })}
        </div>
    );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...