Question

我的搜索应用上有一个轮播。我已经设置了一个for循环，该循环最多可以进行11次迭代。循环在目录中的许多子文件夹上进行迭代，并且路径是动态设置的。这是为了在轮播中获得尽可能多的图像。

每个子文件夹中的图像数量都不同。有些没有，超过30个。其中大多数最多显示4到5张图像，这意味着轮播中大约有6到7张残缺的图像。

我的问题是：是否可以使用onError重新启动循环，从而产生一种骇人听闻的无限型滑块？我知道您可以设置一个默认图像，但是据我所知，那只是一个，而且是静态的。

编辑：这是我的代码。我正在使用React Image Gallery：

  let images = [];
  for (let i = 0; i < 10; i++) {
      images.push({
        original: `${PREFIX_URL}${i}.jpg`,
        thumbnail:`${PREFIX_URL}${i}.jpg`
      });
    }

  <ImageGallery 
     items={images}
     lazyLoad={true}
   />

Answer 1

您可以像这样处理onError：

getInitialState: function(event) {
  return {errored: true};
},

handleError: function(event) {
  this.setState({errored: true});
},

render: function() {
  if (this.state.errored) {
    return null;
  } else {
    return <img onError={this.handleError} src={src} />;
  }
}

Answer 2

尝试类似的方法（未经测试）

constructor() {
  super();


let images = [];
  for (let i = 0; i < 10; i++) {
      images.push({
        original: `${PREFIX_URL}${i}.jpg`,
        thumbnail:`${PREFIX_URL}${i}.jpg`
      });
    }

  this.state = {
    images: images
  }

  this.handleImageError = this.handleImageError.bind(this);
}

渲染中

  <ImageGallery 
     ref={i => this._imageGallery = i}
     items={this.state.images}
     lazyLoad={true}
     onImageError = {this.handleImageError}
   />

handleImageError

handleImageError(event) {

 let index = this._imageGallery.getCurrentIndex();
 this.setState({
    data: this.state.images.filter((_, i) => i !== index)
  });

}

是否可以使用onError重新启动循环？

2 个答案: