在 React 组件中循环计数

Question

我正在尝试在 React 中显示包含每个口袋妖怪名称的图像。我是新手，无法找到一种方法来循环列表计数以显示带有正确口袋妖怪的正确名称。如果我取出“{test}”并在 src url 中插入一个静态数字，代码可以正常显示一张图像，但我找不到将 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>
);

我的 app.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)

Answer 1

你应该删除 {test=props.monster.url[36]}并直接在src标签中使用它作为;

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]}
...

Answer 2

如我所见，您的响应是包含宠物小精灵名称和 api url 的对象集合获取宠物小精灵的详细信息。现在如果你看一下 url 的格式，url 包含口袋妖怪的 id 作为最后一个 uri 参数您只需要从 url 获取该 ID 并从中生成图像 url。你可以从 url 获取 pokemon id 为：

 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>

在 React 组件中循环计数

Cycling through count in React component

url

for-loop

reactjs

react-component