javascript - 循环遍历对象，然后将值传递给axios函数，在react组件中渲染结果

Question

刚刚开始学习 React，需要一些关于如何循环对象并将值传递到 axios get 请求中的指示，然后存储数据并将其呈现在屏幕上。

我有一个由多个对象组成的数组，如下所示:

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

我想遍历专辑并将值传递到 Last.fm API 的 axios GET 请求中:

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函数。引用this link更多细节。我提供了一个基本的伪代码来说明我们如何才能满足您的要求。请引用这个例子。如果您想进一步了解，可以询问。

您可以引用 this post 检查 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>;
  }
}

我还没有在实际的编辑器中完成它。如有语法错误，敬请谅解。