我想通过在 React Js 中的旧结果页面下方添加新页面来在我的 elasticsearch 结果中启用分页

Question

我正在为搜索引擎（使用 elasticsearch）构建一个 UI（使用 ReactJs），它每页 returns 20 个结果。当我单击下一步按钮时，它会给出接下来的 20 个结果，但旧结果会被新结果替换。我只想将新结果附加到旧结果。

这是我的代码：

import React from 'react'
import SearchResults from './searchresults';
import elasticsearch from 'elasticsearch';

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


var size = 20;
var from_size = 0;
var search_query = '*'

class Searchbox extends React.Component {
    constructor(props) {
    super(props);
    this.state = { results: [], notFound: true }
    this.handleChange = this.handleChange.bind(this);
    this.next = this.next.bind(this);
    this.prev = this.prev.bind(this);
    this.er = this.er.bind(this);
    this.esSearch = this.esSearch.bind(this);
} 

componentWillMount() {
    search_query = '*';
    this.esSearch(search_query, from_size);
}

handleChange ( event ) {
    search_query = event.target.value + '*';
    from_size = 0;
    this.esSearch(search_query, from_size);
}

next() {
    from_size += size;
    if(from_size<=size) {
    console.log(from_size);
    console.log(search_query);
    this.esSearch(search_query, from_size);
}
    else {
        this.er();
        from_size -= size;
    }
}

er() {
    alert("NO MORE PAGES");
}

esSearch( sq, from ) {
    var search_query = sq;

    client.search({
        index: 'photos',
        type: 'photo',
        q: search_query,
        size: size,
        from: from
    }).then(function ( body ) {
        if(body.hits.max_score===null) {
            this.setState({notFound: true})
        }
        else {
            this.setState({notFound: false})
        }
        this.setState({ results: body.hits.hits })
    }.bind(this), function ( error ) {
        console.trace( error.message );

    });
}

renderNotFound() {
return <div className="notFound">Not found. Try a different search.</div>;
}

renderPosts() {

    return(
        <div className="results">
                    <SearchResults key={this.from_size} results={ this.state.results } />
                    <button id="prev" type="button" className="btn btn-primary" onClick={this.prev} >Prev</button>
                </div>
    )

}

render() {

    const { notFound } = this.state;

    return (
        <div>
            <input id="search" className="form-control form" type="text" placeholder="Start Searching" name="search" onChange={ this.handleChange }></input>
                <div>
                    {notFound ? this.renderNotFound() : this.renderPosts()}
                </div>
        </div>
    )
}

}

export default Searchbox;

此应用程序默认显示所有结果。

Answer 1

在你的 esFunction 中，你可以尝试这样的事情：

let oldState = this.state.results.slice();
body.hits.hits.forEach(function (searchResult) {
    oldState.push(searchResult)    
});

this.setState({
    results: oldState
});

有个说的就是这个话题。更多 details 在 Facebook React 页面。

我想通过在 React Js 中的旧结果页面下方添加新页面来在我的 elasticsearch 结果中启用分页

I want to enable pagination in my elasticsearch results by adding new page of results below the older one in React Js

javascript

pagination

elasticsearch

reactjs

elastic-stack