如何使用响应式搜索来实现“加载更多”function？

Question

我想用响应式搜索构建一个搜索页面，当用户将搜索结果滚动到底部时，他们可以找到一个“加载更多”按钮，单击它，将加载下一页。 发现文档里面有个回调function叫“handleLoadMore()”，但是不知道怎么用。

我写的代码就是这样。

 <ReactiveList className={classes.content} dataField={"description"} componentId={"SearchResult"} react={{ and: ["DataSearch"] }} pagination={false} scrollOnChange={true} stream={true} showResultStats={true} renderResultStats={stats => { return ( <div> <p className={classes.stats}> {stats.numberOfResults} results available based on your location </p> <img className={classes.logo_color} src={require("../../images/logo-color.png")} alt="logo-color" /> </div> ); }} paginationAt="bottom" size={12} infiniteScroll={true} loader="Loading Results.." > {({ data, handleLoadMore }) => { return ( <ResultCardsWrapper className={classes.cardsWrapper}> {data.map((element, index) => { console.log(data); return ( <ResultCard className={classes.card} key={index} target={"_self"}> <Link className={classes.wrapper} to={`/shop/${element._index}/${element._id}`} > <ResultCard.Image className={classes.image} src={getLogo(element.logo)} /> <ResultCard.Title className={classes.title}> {element.title} <div className={classes.shopIcons}> {console.log(element.opening_hour[curDay].open)} {curTime <= element.opening_hour[curDay].close && curTime >= element.opening_hour[curDay].open? ( <img src={require("../../images/Icon ionic-md-time.svg")} alt="open" /> ): ( <img src={require("../../images/Icon ionic-md-time-closed.svg")} alt="open" /> )} <img src={require("../../images/Icon material-local-offer.svg")} alt="offer" /> </div> </ResultCard.Title> </Link> </ResultCard> ); })} <button onClick={handleLoadMore}>Load More</button> </ResultCardsWrapper> ); }} </ReactiveList>;

Answer 1

您可以将 handleLoadMore 替换为 loadMore，它对我有用。