Невозможно отобразить массив в React - PullRequest
Новая
       12

Невозможно отобразить массив в React

0 голосов
/ 04 марта 2019

Я довольно новичок в React, и у меня проблема с обработкой данных из REST API с помощью React.Я получаю карты Pokemon от API Pokemon TCG.Возвращенные данные - это 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.Когда я смотрю в консоль, я получаю следующее:

enter image description here

Почему это не отображает изображения с элементами div, как я ожидаю?Мне не хватает базовых знаний о React?

Заранее спасибо

РЕДАКТИРОВАТЬ: Благодаря комментариям ниже я исправил это, я забыл использовать setState в getDataМетод:

enter image description here

Следовательно, он не работал.

Ответы [ 2 ]

0 голосов
/ 04 марта 2019

Если вам нужно что-то хранить в состоянии компонента 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})
})
}
0 голосов
/ 04 марта 2019

Вы можете сделать это с помощью следующего кода.

Вы можете использовать карту, которая возвращает 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(); 
      })
  }
...