无法在React

Question

我对React还是很陌生，在使用React处理来自REST API的数据时遇到了问题。我正在从Pokemon TCG API获取Pokemon卡。返回的数据是JSON，其中包含有关卡的各种信息，包括图像URL。我正在尝试显示口袋妖怪卡的列表，但无法：

因为我正在练习，所以我会在 App.js 文件中执行所有操作：

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';

class App extends Component {

  constructor() {
    super();
    this.state = {
      pokemon: "",
      //url: "https://api.pokemontcg.io/v1/cards?name=",
      listOfPokeImageUrls: []
    }
  }

  lookupPokemon() {
    this.setState({
      listOfPokeImageUrls: []
    })

    this.getData();
  }

  getData() {
    axios.get(`https://api.pokemontcg.io/v1/cards?name=squirtle`)
      .then(response => {
        response.data.cards.forEach(element => {
          this.state.listOfPokeImageUrls.push(element.imageUrl);
        });
        //this.forceUpdate(); 
      })
  }

  render() {
    console.log(this.state.listOfPokeImageUrls);

    let imageList = this.state.listOfPokeImageUrls.map(
      (element) => { return <div><img src={element.imageUrl} alt=""></img></div> }
    );

    console.log(imageList);

    return (
      <div className="App">
        <input type="text"></input>
        <button onClick={this.lookupPokemon.bind(this)}>Fetch pokemoncards</button>
          {imageList}
      </div>
    );
  }
}

export default App;

我面临的问题是 let imageList 在映射后始终为空。因此，这些卡没有显示在我的屏幕上。我正在记录一些信息，首先是图像URL的数组，其次是应该保存div和img元素的数组。当我查看控制台时，我得到以下信息：

为什么它不像我期望的那样将图像与div映射？我是否缺少一些有关React的基本知识？

预先感谢

编辑： 多亏了下面我修复它的注释，我忘了在getData方法中使用setState：

因此，它不起作用。

Answer 1

您可以通过以下代码来实现。

您可以使用返回图像URL的地图。您可以像这样更改状态，但不会触发生命周期渲染方法，因为您必须设置状态。

getData() {
    axios.get(`https://api.pokemontcg.io/v1/cards?name=squirtle`)
      .then(response => {
        const urls = response.data.cards.map(element => {
          return element.imageUrl;
        });
        this.setState({
           listOfPokeImageUrls: urls
        });
        //this.forceUpdate(); 
      })
  }

Answer 2

如果您必须以React组件的状态存储任何内容，则可以使用setState方法。 因此，在您的代码中：

getData() {
axios.get(`https://api.pokemontcg.io/v1/cards?name=squirtle`)
  .then(response => {
   const imageUrls = response.data.cards.map((card,index)=>{
   return card.imageUrl;
   })
   this.setState({listOfPokeImageUrls:imageUrls})
})
}