0

我正在尝试让我的搜索应用程序与 ReactiveSearch 一起使用并且遇到了一些麻烦（我可能缺乏理解......仍在学习）。

基本上在我的主页上('/')，我只有一个用于提供自动完成功能的 DataSearch 组件（很像 google.com）。当一个建议被选中时，它会重定向（使用 RR4）到 /results 路由，它是一个 ReactiveList 组件。在我的全局 Header (Navbar.js) 中还有一个相同的 DataSearch 组件的副本是根据路由有条件地呈现的 - 显示在除('/').

有几件事正在发生：

  1. 当我从主路由下拉列表中进行查询选择'/'，然后重定向到该'/results路由时，DataSearch 文本输入不为空 - 先前选择的查询在那里，它不提供任何新建议并且显示的结果不是基于根据选定的查询。

  2. 页面上的 ResultList 组件不会显示基于所选查询的实际搜索结果/results- 无论是来自'/'还是'/results（显示建议 - 不是查询选择后的实际搜索结果）。

  3. 如果我去/results（点击导航栏中的链接），页面会自动显示 ES 索引 - 即使没有执行查询？

不知道发生了什么...

我从我的应用程序中获取了相关代码（路由和组件）并制作了一个代码框来演示我所描述的行为。

4

1 回答 1

1

非常感谢 @sidi 在此代码框上提供的帮助。

在我的主路由上的 DataSearch 组件中，这完全是关于我的 onValueSelected 函数，只需要添加一些代码：

<DataSearch
  ...
  onValueSelected={(value, cause, source) => {
  if (cause !== "SUGGESTION_SELECT") {
  // use this query
  console.log(
  "use this query - onValueSelected: ",
  this.query
  );
  this.setState({ redirect: true, value: value }); // value: value
  this.props.history.push(`/?q=${value}`); // added entire line
  } else {
  this.valueSelected = true;
  this.setState({ value }); // added enter line
  }
}}

在第一个 setState 中，value: value添加了this.history.push(/?q=${value} );。最后，我也错过了this.setState({ value });else 子句中的第二个。

在 '/' 和 '/results/ 路由的 if 语句中：

if (redirect) {
      return (
        <Redirect
          to={{
            pathname: "/results",
            search: `?q=${value}`
          }}
        />
      );
    }

我错过<Redirect>了return ().

有时，当您在代码上工作了几天后，您只需要另一双眼睛。

使用 ReactiveSearch 的其他人！用于 Elasticsearch 的出色 UI 库。

于 2018-11-07T15:19:00.897 回答