无法在 React 中映射数组答案

【问题标题】：Unable to map array in React无法在 React 中映射数组
【发布时间】：2019-03-04 10:48:23
【问题描述】：

我是 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 的基本知识？

提前致谢

编辑： 感谢下面的 cmets 我修复了它，我忘了在 getData 方法中使用 setState：

因此，它不起作用。

【问题讨论】：

Array.from(source, calback)

标签： javascript reactjs rest mapping axios

【解决方案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(); 
      })
  }

【讨论】：

【解决方案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})
})
}

【讨论】：