ReactiveSearch 查询和结果行为答案

【问题标题】：ReactiveSearch query and results behaviorReactiveSearch 查询和结果行为
【发布时间】：2019-03-29 03:52:23
【问题描述】：

我正在尝试让我的搜索应用与 ReactiveSearch 一起使用，但遇到了一些问题（我可能缺乏理解……仍在学习）。

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

发生了一些事情：

当我从下拉列表中选择主路由 '/'，然后重定向到 '/results 路由时，DataSearch 文本输入不为空 - 之前选择的查询存在不提供任何NEW建议，并且显示的结果不是基于所选查询。
/results 页面上的 ResultList 组件中不会显示基于所选查询的实际搜索结果 - 无论是来自 '/' 还是 '/results（显示建议 - 不是查询选择后的实际搜索结果） .
如果我转到/results（通过单击导航栏中的链接），页面会自动显示 ES 索引 - 即使没有执行查询？

不知道发生了什么......

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

【问题讨论】：

嘿，检查了你的密码箱。您可以在/results 路由上为您的搜索组件使用URLParams 属性，并在用户从/ 路由中选择搜索建议时设置URL 查询字符串。您可以使用 DataSearch 的 onValueSelected 属性来获取此信息。 opensource.appbase.io/reactive-manual/search-components/…
@sidi - 你能再看看我的代码框 - 做了一些更改，我相信我按照你说的做了，但我仍然遇到同样的问题。查询的值仍然未定义，结果不是基于用户提交的查询

标签： autocomplete reactivesearch

【解决方案1】：

非常感谢@sidi 在codesandbox 上提供的帮助。

在我家路线上的 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});。最后，我还错过了 else 子句中的第二个 this.setState({ value });。

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

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

我在return () 中缺少<Redirect>。

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

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

【讨论】：