如何获得无限滚动，直到所有结果都显示在 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

在 Facebook 主页中使用滚动的 AJAX 调用；使用全局递增 counterVariable 递增每次 AJAX 调用为您的 ElasticSearch 使用参数 from 记录您的结果文档的 size 您想要在一次 AJAX 滚动调用中。在每次 ajax 调用时递增。

关于在滚动上调用 AJAX 的 JavaScript，请参阅 Similar Solved Answer。