javascript - 我想在使用Elasticsearch在React Js中输入搜索查询之前获得页面加载时的所有结果

Question

我想在页面加载后立即显示所有结果，然后再输入搜索字词。输入搜索词后，结果应该相应地出现。我正在使用 flex 搜索通过React 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={<API URL> + result._source.file_name} alt="Search Result" />
                                </LazyLoad>
                            </li>
                        ) }) }      
            </ul>
            <button type="button" className="btn btn-default">Load More</button>
        </div>
    )
}
}

SearchResults.propTypes = {
    results: PropTypes.array
}

export default SearchResults;

我将大小设置为20，并且每20个请求中就需要一个。请帮我。谢谢。

目前，它仅显示前20个结果。我希望它通过使用无限滚动显示更多结果。

Answer 1

您将需要更改查询以解决您的分页。
看看ES paging。