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

Posted 2023-03-10

【中文标题】我想通过在 React Js 中的旧页面下方添加新的结果页面来在我的弹性搜索结果中启用分页

【英文标题】：I want to enable pagination in my elasticsearch results by adding new page of results below the older one in React Js

【发布时间】：2017-11-03 12:13:18

【问题描述】：

我正在为搜索引擎（使用 elasticsearch）构建一个 UI（使用 ReactJs），它每页返回 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;

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

【问题讨论】：

在您的 esSearch 函数中，您正在将结果添加到您的状态中，从而有效地覆盖其中已有的内容。您应该找到一种附加结果的方法。

这就是我的问题@VedranMaricevic

【参考方案1】：

在您的 esFunction 中，您可以尝试以下操作：

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

this.setState(
    results: oldState
);

有一个SO post 谈论这个话题。 更多 details 在 Facebook React 页面。

【讨论】：

不，@VedranMaricevic。它没有解决我的问题。由于 Elasticsearch 的主要对象从传输到结果的 body.hits.hits 开始。使用此函数会破坏结果中有助于显示结果的属性。

请使用当前结果的样本和来自 ES 的数据更新您的问题，以便我们了解是什么破坏了结果。

我写的代码运行良好。 next() 将搜索索引增加 20，以便可以显示 20 个新结果。我想要的是第一个查询中显示的结果应该保留。并单击下一步按钮，新结果如下所示。喜欢这个：here

您的状态中已经有一个 ES 结果数组。您发送一个新集合的查询。那套进来，并且具有相同的结构。您将新数据添加到旧数据中，因此页面会更新。我说的对吗？

这就是为什么我要求你展示现有的数据样本和来自 ES 的新数据集。 hits.hits 应包含搜索结果中的对象数组。