1

我是新手，有问题。我想为开始创建一个简单的搜索页面，并且我已经有了一个 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;

出于法律原因，我不允许给出反应性基础问题。

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

所以我正在寻找一种将我的搜索结果显示为结果卡的解决方案，但我没有找到任何解决方案。我已经尝试了几个教程，但我无法得到它。

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

谢谢

4

1 回答 1

0

镇，

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

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

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

希望这可以帮助！

于 2020-04-15T07:28:55.643 回答