Question

我有在加载组件时得到的images数组。我尝试按标题过滤图像，所以我在filterByTitle函数上获得了标题。我尝试通过axios过滤图像数组，以从flickr api获取结果。

filterByTitle = title => {
    let tempArr = [];
    this.state.images.map(image => {
      axios
        .get(
          `https://www.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key={some api key}&photo_id=${
          image.id}&format=json&nojsoncallback=1`)
        .then(result => {
          if (result.data.photo.title._content.indexOf(title) > -1) {
            tempArr.push(image);
          }
        });
    });

    setTimeout(() => {
      this.setState({
        images: tempArr // update the images
      });
    }, 500);
  };

仅当我使用setTimeOut时，我才成功，等待地图结束。

我希望在没有setTimeOut的情况下也能做同样的事情。我只想在地图结束时才设置setState。我怎样才能做到这一点？

谢谢！

Answer 1

这对您有用吗？此外，更好的解决方案是将标题获取功能包含在Promise中，并在Promise得到解决后更新状态

filterByTitle = title => {
    let tempArr = [];
    let imagesLength = this.state.images.length;
    let processedLength = 0
    this.state.images.map(image => {
      axios
        .get(
          `https://www.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key={some api key}&photo_id=${
          image.id}&format=json&nojsoncallback=1`)
        .then(result => {
          processedLength++;
          if (result.data.photo.title._content.indexOf(title) > -1) {
            tempArr.push(image);
          }
          if(processesLength ==  imagesLength){
             this.setState({
               images: tempArr // update the images
             });
          }
        });
    });

  };

Answer 2

您要等到所有问题解决之后，这是Promise.all的用例

它应该看起来像这样：

    filterByTitle = title => {
    let tempArr = [];
    let promises = this.state.images.map(image => axios
      .get(
        `https://www.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key={some api key}&photo_id=${
        image.id}&format=json&nojsoncallback=1`)
      .then(result => {
        if (result.data.photo.title._content.indexOf(title) > -1) {
          tempArr.push(image);
        }
      });
    );

    Promise.all(promises).then(() => {
      this.setState({
        images: tempArr // update the images
      });   
    })
  };

通过axios过滤数组以获得结果

2 个答案: