Циклический подсчет в компоненте React - PullRequest
Новая
       5

Циклический подсчет в компоненте React

0 голосов
/ 03 февраля 2020

Я пытаюсь отобразить изображение с каждым именем покемона в реакции. Я новичок, чтобы отреагировать, и не могу найти способ циклически перебрать список, чтобы отобразить правильное имя с правильным покемоном. Если я возьму "{test}" и вставлю число stati c в URL-адрес sr c, код работает нормально, отображая одно изображение, но я не могу найти способ обновить URL-адрес +1, чтобы отобразить правильное изображение с каждым именем покемона.

Мой код компонента: 

import React from 'react';
import './card.styles.css';

export const Card = props => (
    <div className = 'card-container'>
        <img alt="monster" 
        {test = props.monster.url[36]}
        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/${test}.png`}
        width='180'
        />
        <h2> {props.monster.name} </h2>
        <p>{props.monster.email}</p>
    </div>
);

и мое приложение. js код: 

import React, { Component } from 'react';
import {CardList} from './components/card-list/card-list.component.jsx';
import { SearchBox } from './components/search-box/search-box.component.jsx';
import './App.css';

class App extends Component {
  constructor() {
    super();

    this.state = {
      monsters: [],
      searchField: ''
    };
  }

  componentDidMount() { 
    fetch('http://pokeapi.co/api/v2/pokemon')
    .then(response => response.json())
    .then(pokemon => this.setState({ monsters: pokemon.results}));

  }

  handleChange = (e) => {
    this.setState({searchField: e.target.value})
}

  render() {
    const { monsters, searchField} = this.state;
    const filteredMonsters = monsters.filter(monster => 
      monster.name.toLowerCase().includes(searchField.toLowerCase())
      );
    return (
      <div className='App'>
      <h1>Pokemon Rollodex</h1>
      <SearchBox
        placeholder='search monsters'
        handleChange={this.handleChange}
        />
      <CardList monsters={filteredMonsters}/>
      </div>
    );
  }
}

export default App;

Код списка карт: 

import React from 'react';
import { Card } from '../card/card.component';
import './card-list.styles.css';

export const CardList = props => (
    <div className='card-list'>
    {props.monsters.map(monster => (
        <Card key ={monster.name} monster={monster} />
      ))}
    </div>
);

Ответ API (имя и URL покемона): 

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "bulbasaur", url: "https://pokeapi.co/api/v2/pokemon/1/"}
1: {name: "ivysaur", url: "https://pokeapi.co/api/v2/pokemon/2/"}
2: {name: "venusaur", url: "https://pokeapi.co/api/v2/pokemon/3/"}
3: {name: "charmander", url: "https://pokeapi.co/api/v2/pokemon/4/"}
4: {name: "charmeleon", url: "https://pokeapi.co/api/v2/pokemon/5/"}
5: {name: "charizard", url: "https://pokeapi.co/api/v2/pokemon/6/"}
6: {name: "squirtle", url: "https://pokeapi.co/api/v2/pokemon/7/"}
7: {name: "wartortle", url: "https://pokeapi.co/api/v2/pokemon/8/"}
8: {name: "blastoise", url: "https://pokeapi.co/api/v2/pokemon/9/"}
9: {name: "caterpie", url: "https://pokeapi.co/api/v2/pokemon/10/"}
10: {name: "metapod", url: "https://pokeapi.co/api/v2/pokemon/11/"}
11: {name: "butterfree", url: "https://pokeapi.co/api/v2/pokemon/12/"}
12: {name: "weedle", url: "https://pokeapi.co/api/v2/pokemon/13/"}
13: {name: "kakuna", url: "https://pokeapi.co/api/v2/pokemon/14/"}
14: {name: "beedrill", url: "https://pokeapi.co/api/v2/pokemon/15/"}
15: {name: "pidgey", url: "https://pokeapi.co/api/v2/pokemon/16/"}
16: {name: "pidgeotto", url: "https://pokeapi.co/api/v2/pokemon/17/"}
17: {name: "pidgeot", url: "https://pokeapi.co/api/v2/pokemon/18/"}
18: {name: "rattata", url: "https://pokeapi.co/api/v2/pokemon/19/"}
19: {name: "raticate", url: "https://pokeapi.co/api/v2/pokemon/20/"}
length: 20
__proto__: Array(0)

Ответы [ 2 ]

1 голос
/ 03 февраля 2020

Как я вижу, ваш ответ - это коллекция объектов, содержащих имя покемона и api url для получения подробностей о покемоне. Теперь, если вы посмотрите на формат URL-адреса, URL-адрес содержит идентификатор pokemon в качестве последнего параметра URI, вам просто нужно получить этот идентификатор из URL-адреса и сгенерировать URL-адрес изображения из него. вы можете получить идентификатор покемона из URL как: 

 url.split("pokemon/")[1].replace('/','')

теперь компонент вашей карты должен выглядеть следующим образом: 

 export const Card = props => {
  let id=props.monster.url.split("pokemon/")[1].replace('/','')
 return (  
   <div className = 'card-container'>
    <img alt="monster" 
    src={'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/'+id+'.png'}
    width='180'
    />
    <h2> {props.monster.name} </h2>
    <p>{props.monster.email}</p>
</div>
 )}

рассмотрите следующий фрагмент 

//cart component
const Card = props => {
  let id=props.monster.url.split("pokemon/")[1].replace('/','')
 return (  
   <div className = 'card-container'>
    <img alt="monster" 
    src={'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/'+id+'.png'}
    width='180'
    />
    <h2> {props.monster.name} </h2>
    <p>{props.monster.email}</p>
</div>
 )}
//card list component
 const CardList = props => (
    <div className='card-list'>
    {props.monsters.map(monster => (
        <Card key ={monster.name} monster={monster} />
      ))}
    </div>
);

class App extends React.Component{

render(){
let data=[ {name: "bulbasaur", url: "https://pokeapi.co/api/v2/pokemon/1/"},
 {name: "ivysaur", url: "https://pokeapi.co/api/v2/pokemon/2/"},
 {name: "venusaur", url: "https://pokeapi.co/api/v2/pokemon/3/"},
 {name: "charmander", url: "https://pokeapi.co/api/v2/pokemon/4/"},
 {name: "charmeleon", url: "https://pokeapi.co/api/v2/pokemon/5/"},
 {name: "charizard", url: "https://pokeapi.co/api/v2/pokemon/6/"},
 {name: "squirtle", url: "https://pokeapi.co/api/v2/pokemon/7/"},
 {name: "wartortle", url: "https://pokeapi.co/api/v2/pokemon/8/"},
 {name: "blastoise", url: "https://pokeapi.co/api/v2/pokemon/9/"},
 {name: "caterpie", url: "https://pokeapi.co/api/v2/pokemon/10/"},
 {name: "metapod", url: "https://pokeapi.co/api/v2/pokemon/11/"},
 {name: "butterfree", url: "https://pokeapi.co/api/v2/pokemon/12/"},
 {name: "weedle", url: "https://pokeapi.co/api/v2/pokemon/13/"},
{name: "kakuna", url: "https://pokeapi.co/api/v2/pokemon/14/"},
{name: "beedrill", url: "https://pokeapi.co/api/v2/pokemon/15/"},
{name: "pidgey", url: "https://pokeapi.co/api/v2/pokemon/16/"},
{name: "pidgeotto", url: "https://pokeapi.co/api/v2/pokemon/17/"},
{name: "pidgeot", url: "https://pokeapi.co/api/v2/pokemon/18/"},
{name: "rattata", url: "https://pokeapi.co/api/v2/pokemon/19/"},
{name: "raticate", url: "https://pokeapi.co/api/v2/pokemon/20/"}];

  //here just for demo i am using static data
 return  <CardList monsters={data}/>
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
1 голос
/ 03 февраля 2020

Вы должны удалить {test=props.monster.url[36]} и напрямую использовать его в теге sr c как; 

import React from 'react';
import './card.styles.css';

export const Card = props => (
    <div className = 'card-container'>
        <img alt="monster" 
        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/${props.monster.url[36]}.png`}
        width='180'
        />
        <h2> {props.monster.name} </h2>
        <p>{props.monster.email}</p>
    </div>
);

Вы не можете создать состояние, выполнив 

export const Card = props => (
  {test = props.monster.url[36]}
...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...