Как я могу гарантировать, что получить разные результаты от API Flickr - PullRequest
Новая
       20

Как я могу гарантировать, что получить разные результаты от API Flickr

0 голосов
/ 07 мая 2019

У меня есть простое приложение Gallery, и я хочу реализовать бесконечную прокрутку и рендеринг новых изображений по мере возникновения события.

Мне удалось реализовать событие прокрутки, проблема в том, что япри поиске по пользовательскому вводу результаты, которые я получаю, всегда совпадают с результатами массива изображений, которые в данный момент отображаются. 

class Gallery extends React.Component {
constructor(props) {  
    super(props);
    this.state = {
      images: [],
      galleryWidth:window.clientWidth, 
      countCloned: 1,
      scroll:false
    };

//first call when the page is render
getImages(tag) {
    const getImagesUrl = `services/rest/?method=flickr.photos.search&api_key=522c1f9009ca3609bcbaf08545f067ad&tags=${tag}&tag_mode=any&per_page=100&format=json&safe_search=1&nojsoncallback=1`;
    const baseUrl = 'https://api.flickr.com/';
    axios({
      url: getImagesUrl,
      baseURL: baseUrl,
      method: 'GET'
    })
      .then(res => res.data)
      .then(res => {
        if (
          res &&
          res.photos &&
          res.photos.photo &&
          res.photos.photo.length > 0
        ) {
          this.setState({images: res.photos.photo});
        }
      });
render() {
    return (
      <div className="gallery-root"  
           id = "gallery-id"
           ref = "iScroll"
           >
        {this.state.images.map(dto => {
          return <Image 
                  key={'image-' + dto.id} 
                  dto={dto}
                  galleryWidth={this.state.galleryWidth}
                  callBack = {this.cloneHandler.bind(this)}
                  displayImage = {this.renderImage.bind(this)}/>;
        })}
      </div>
    );
  }
}
  }

//gets called on scroll event 
getNewResults(tag){
    const getImagesUrl = `services/rest/?method=flickr.photos.search&api_key=522c1f9009ca3609bcbaf08545f067ad&tags=${tag}&tag_mode=any&per_page=200&format=json&safe_search=1&nojsoncallback=1`;
    console.log("before push " + this.state.images.length);
    const baseUrl = 'https://api.flickr.com/';
    axios({
      url: getImagesUrl,
      baseURL: baseUrl,
      method: 'GET'
    })
      .then(res => res.data)
      .then(res => {
          const oldImages = this.state.images;
          console.log(oldImages.length); //100
          const newImages = res.photos.photo;
          const allImages = oldImages.concat(newImages);
          console.log(allImages.length) // 300 (i changed the result im getting to 200 )
          this.setState({images:allImages});
         {         
        }
      });
       console.log("after push" + this.state.images.length);
  }

Я вижу, как увеличивается размер массива при каждой прокрутке, но я получаю: 

flattenChildren(...): Encountered two children with the same key,

, поскольку изображения одинаковы.Как поиск может мерцать по странице, может быть?или я должен увеличить результаты и отфильтровать?что будет лучшим решением?

...