React/Axios api 调用 returns 承诺

Question

我在通过 Axios 调用 API 时很难理解一些事情。 E.G 曲目列表是一个数组，其中有一些曲目作为字符串。我正在使用这些曲目传递到 api 调用以浏览每首歌曲和 return 每首歌曲的歌词。我最终想得到每个的长度，对它们进行排序并找到所有歌曲中的平均单词，即 Coldplay 歌曲。所以我希望 lengthOfSongs 最终在状态下看起来像这样： lengthOfSongs: [10, 20, 30]

    listofTracks.map(track => {
      return api
        .getLyrics(inputArtist, track)
        .then(response => {
          this.setState({ lengthOfSongs: response.split(" ").length });
        })
        .catch(error => {
          console.log("ERROR");
        });
    });

我知道一个承诺已经 returned 并且我已经使用了 .then 但出于某种原因当它被安慰时它只是把最后一个还给我。它将替换每个已解决的问题，而不是将它们添加到数组中。因此，当我在页面上呈现状态时，它会显示 10，然后在解决后将其切换为 20，然后在解决后将其切换为 30，等等。但我只想要一个包含所有长度的简单地图。我觉得问题出在地图上，或者与承诺相关的代码可能没有正确执行。菜鸟在这里:(请帮忙

Answer 1

我认为这里的问题在于您对 setState 的使用。每次执行 setState 时，您都会将一个数据传递给状态。因此在循环结束时，状态包含最后的数据。

您可以尝试在状态上使用展开运算符。

this.setState({
 lengthOfSongs : [...this.state.lengthOfSongs, response.split(" ").length]
});

React/Axios api 调用 returns 承诺

React/Axios api call returns promises

javascript

asynchronous

reactjs

es6-promise

axios