Проходить по объекту, затем передавать значения функции axios, отображать результаты в компоненте реакции

Question

Просто начинайте учиться реагировать и нуждаетесь в нескольких указателях о том, как пройти через объект и передать значения в запрос на получение axios, затем сохранить данные и отобразить их на экране.

У меня есть массив из нескольких объектов, например, так:

const albums = [
  {
    artist: 'Artist 1',
    album: 'Album 1'
  },
  {
    artist: 'Artist 2',
    album: 'Album 2'
  },
  {
     artist: 'Artist 3',
    album: 'Album 3'
  }
];

Я хочу перебрать альбомы и передать значения в GET-запрос axios для API Last.fm:

fetchAlbum(artist, title) {
  axios.get(`https://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=API_KEY&artist=${artist}&album=${title}&format=json`)
  .then(res => {
    // ...
  })
}

componentDidMount() {
  this.fetchAlbum('Artist 1','Album 1');
  this.fetchAlbum('Artist 2','Album 2');
  this.fetchAlbum('Artist 3','Album 3');
}

Ответ возвращает данные (в частности, URL-адрес изображения альбома), которые я хочу использовать для создания сетки альбомов, отображаемых в качестве компонента.Нужно ли помещать все эти данные ответа в состояние, а затем проходить и выводить их оттуда?Или есть более простой способ?Спасибо заранее!

Answer 1

Для одновременного запроса нескольких API вы можете использовать функцию axios.all.Обратитесь к этой ссылке для более подробной информации.Я включил базовый псевдокод, чтобы проиллюстрировать, как мы можем делать то, что вы просите.Пожалуйста, обратитесь к этому примеру.Если вы хотите получить дополнительные разъяснения, вы можете спросить.

Вы можете проверить, как работает setState, ссылаясь на этот пост .

/* Basic Example */
class App extends React.Component {
  albums = [];
  baseUrl = `https://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=API_KEY`;

  constructor(props) {
    super(props);
    this.albums = [{artist: "Artist 1",album: "Album 1"}, ..... ]
    this.state = {
      imageUrls: []
    }
  }


  componentDidMount() {
    axios.all(this.albums.map(u => axios.get(`{this.baseUrl}&artist=${u.artist}&album=${u.album}&format=json`)))
      .then(axios.spread((...res) => {
        // all requests are now complete
        console.log(res);

        //note res[0] will include first response, res[1] will include second response
        //now you need to manipulate data as you required in state
        const imgUrls = this.manipulationFunc(res);
        this.setState(() => {
          return {imageUrls: imgUrls }
        })

      }));
  }

  manipulationFunc(data) {
    // process image url in each response and return it
    let imageUrls = []; 
    imageUrls = getImageUrlsFromDataUsingLoopOrMap; 
    return imageUrls ;
  }

  render() {
    const {imageUrls} = this.state
    const elem = imageUrls && imageUrls[0] ? 
    (imageUrls.map(url => (
     <img src={url} />
    )): null;
    return <div> {{elem}}  </div>;
  }
}

Я не делал этого в реальном редакторе.Извинения в случае синтаксических ошибок.

Answer 2

Вы можете сделать что-то вроде этого, но да .. Вы хотели бы установить эти переменные в состоянии компонента или извлечь их до загрузки компонента с помощью componentWillMount(), а затем установить их в своем состоянии.Вот это

import React, { Component, Fragment } from "react";
import { AlbumComponent } from "/components/album";

export class ParentContainer extends Component {
  constructor() {
    super();
    this.state = {
      albums: [
        {
          artist: "Artist 1",
          album: "Album 1"
        },
        {
          artist: "Artist 2",
          album: "Album 2"
        },
        {
          artist: "Artist 3",
          album: "Album 3"
        }
      ],
      isLoading: true
    };
  }

  componentWillMount() {
    this.state.albums.forEach(album => this.fetchAlbum(album));
  }

  fetchAlbum = album => {
    axios
      .get(
        `https://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=API_KEY&artist=${
          album.artist
        }&album=${album.title}&format=json`
      )
      .then(res => {
        let newState = Object.assign({}, this.state); // Duplicate your state so requests can be pushed in an array cleanly
        newState.albumMeta.push(res.data); // push the returned object to the array
        this.state.albums.length === newState.albums.length
          ? !newState.isLoading
          : newState.isLoading;
        this.setState(newState);
      })
      .catch(err => {
        console.log(error);
      });
  };

  render() {
    return (
      <Fragment>
        {!this.state.isLoading &&
          this.state.albumMeta.map(album => <AlbumComponent album={album}/>)}
        // Render your view out here based on if data is loaded
      </Fragment>
    );
  }
}