Question

我正在努力通过Axios进行API调用以了解某些内容。曲目的E.G列表是一个数组，其中包含一些曲目作为字符串。我正在使用这些曲目传递到api调用中，以浏览每首歌曲并返回每首歌词。我最终希望获得每首歌曲的长度，对它们进行排序，然后找到所有即酷歌曲中的平均单词。因此，我希望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");
        });
    });

我知道已经兑现了一个诺言，并且我已经使用过.then，但是由于某种原因，当它得到安慰时，它只是给了我最后一个诺言。它将替换每个已解析的对象，而不是将其添加到数组中。因此，当我在页面上呈现状态时，它将显示10，然后在解决该问题时将其切换为20，然后在解决该问题时将其切换为30，等等。但是我只想要一个所有长度的简单映射。我觉得问题出在地图上，或者与诺言有关的代码未正确执行。菜鸟在这里:(请帮助

Answer 1

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

您可以尝试在状态上使用传播算子。

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

React / Axios api调用返回承诺

1 个答案: