Question

我是新来的人，有问题。我想为开头创建一个简单的搜索页面，并且已经有了一个Elasticsearch集群。

我遵循了本教程：https://codeburst.io/how-to-build-an-e-commerce-search-ui-with-react-and-elasticsearch-a581c823b2c3

该示例可以正常工作。现在我已经根据需要调整了示例：

import React, { Component } from "react";
import "./../index.css";
import { ReactiveBase, DataSearch, SingleRange, ResultCard, CategorySearch, ReactiveList, SingleList, MultiList, ResultCardsWrapper } from '@appbaseio/reactivesearch';


class ReactiveSearchP extends Component {
    render() {
      return (
        <ReactiveBase
            app="index"
            url="https://page:port"
            credentials="user:pw"
        >
            <DataSearch
                componentId="mainSearch"
                dataField={["article"]}
                queryFormat="and"
                iconPosition="left"
            />
            <MultiList
                componentId="price"
                dataField="price.raw"
                title="Price"
                size={5}
            />
            <ResultCard
                componentId="results"
                dataField="article"
                react={{
                  "and": ["mainSearch", "price"]
                }}
                onData={(res)=>({
                  "image": res.image,
                  "title": res.article
                })}
            />
        </ReactiveBase>
      );
    }
}

export default ReactiveSearchP;

出于法律原因，我不允许提供反应性问题概率。

我现在的问题是当我测试此代码时，只有白页。如果我删除结果卡组件，则一切都会按预期显示。

因此，我正在寻找一种将搜索结果显示为结果卡的解决方案，但没有找到任何解决方案。我已经尝试了一些教程，但是我听不懂。

如果有人能帮助我会很高兴。如果仍然缺少信息，请告诉我。

谢谢

Answer 1

小镇

您遵循的教程基于较旧版本的ReactiveSearch。我可能建议您在这里关注最新的教程：https://medium.appbase.io/

此外，您还可以查看迁移指南：https://docs.appbase.io/docs/reactivesearch/v3/advanced/migration/

为您提供一些背景，为什么结果可能不会显示是因为我们更改了结果组件的最新版本。以下是有关如何在最新版本中使用ResultCard的文档：https://docs.appbase.io/docs/reactivesearch/v3/result/resultcard/

希望这会有所帮助！

无法获得反应式搜索的搜索结果

1 个答案: