如何獲得無限滾動，直到所有結果都顯示在React中的Elasticsearch JS API中

Question

我正在爲使用React的搜索引擎開發UI。對於搜索，我使用Elasticsearch。我能夠連接並從我的索引中獲取結果，但我只能獲取我指定的大小的結果數量。我想啓用無限滾動，直到客戶端達到結果的結尾。

我需要協助執行掃描&滾動和分頁

這裏是我的app.js組件代碼

import React from 'react'; 
import Header from './header'; 
import Footer from './footer'; 
import SearchResults from './searchresults'; 
import elasticsearch from 'elasticsearch'; 

let client = new elasticsearch.Client({ 
    host: 'localhost:9200', 
    log: 'trace' 
}) 


class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { results: [], search_query: '*' } 
     this.handleChange = this.handleChange.bind(this); 
    } 

handleChange (event) { 
    var search_query = event.target.value; 
    var size = 20; 

    client.search({ 
     index: 'photos', 
     type: 'photo', 
     q: search_query, 
     size: size 

    }).then(function (body) { 
     this.setState({ results: body.hits.hits }) 
    }.bind(this), function (error) { 
     console.trace(error.message); 
    }); 
} 

render() { 
    return (
     <div className="main"> 
      <Header /> 
      <div className="row test"> 
       <div className="col-xs-4"></div> 
       <div className="col-xs-4"> 
        <div className="row"> 
         <div className="col-xs-12">    
           <input id="search" className="form-control" type="text" placeholder="Start Searching" name="search" onChange={ this.handleChange }></input> 
         </div> 
        </div> 
       </div> 
       <div className="col-xs-4"></div> 
       <br /> 
       </div> 
       <div className="test bclass"> 
        <SearchResults results={ this.state.results } /> 
        <button type="button" className="btn btn-default">Load More</button> 
       </div> 
      <Footer /> 
     </div> 
    ) 
} 
} 

export default App; 

這裏是我的searchresults.js代碼組件：

import React from 'react'; 
import PropTypes from 'prop-types'; 
import LazyLoad from 'react-lazy-load'; 

let i = 1; 


class SearchResults extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { results: [] } 
} 

render() { 
    return (
     <div className="search_results"> 
      <hr /> 
      <ul> 
      { this.props.results.map((result) => { 
       return (
          <li key={ result._id + i++}> 
           <LazyLoad className="lazy"> 
            <img className="image" src={result._source.file_name} alt="Search Result" /> 
           </LazyLoad> 
          </li> 
         ) }) }  
      </ul> 
     </div> 
    ) 
} 
} 

SearchResults.propTypes = { 
    results: PropTypes.array 
} 

export default SearchResults; 

Answer 1

利用滾動的AJAX調用如在Facebook主頁中;使用全局增量counterVariable，每次AJAX調用時您的ElasticSearch調用的參數爲from您想在一個滾動AJAX調用中調用size的結果文檔的記錄。在每個Ajax調用上增加。

對於滾動調用AJAX的javaScript，請參閱Similar Solved Answer。