Autocomplete 反应搜索查询和结果行为

我正试图让我的搜索应用程序与ReactiveSearch配合使用，但遇到了一些问题（可能是我缺乏理解……仍在学习）

基本上，在我的主页

（'/'）

，我所拥有的只是一个用于提供自动完成功能的DataSearch组件（很像google.com）。选择建议后，它将（使用RR4）重定向到/results路由，这是一个反应列表组件。在我的全局标头（Navbar.js）中还有一个相同的DataSearch组件的副本，它是基于路由有条件地呈现的-显示在除

（'/'）

之外的每个路由上

有两件事正在发生：

当我从主路径

'/'

下拉列表中选择查询，然后重定向到

'/results

路径时，DataSearch文本输入不是空的-前面选择的查询就在那里，它不提供任何新的建议，并且根据所选查询显示的结果是而不是

在

/results

页面上的ResultList组件中，不会显示基于所选查询的实际搜索结果-无论是来自

'/'

还是

'/results

（会显示建议-查询选择后不会显示实际搜索结果）

如果我转到

/results

（单击导航栏中的链接），页面会自动显示ES索引，即使没有执行任何查询

不知道发生了什么事

---

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

非常感谢@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
  }
}}

我在

返回（）中缺少

有时候，当你在代码上工作了几天之后，你只需要对代码进行另一番观察

HTH还有其他人使用ReactiveSearch！非常适合Elasticsearch的UI库。
嘿，检查了你的代码沙盒。当用户从
/
路径选择搜索建议时，您可以对
/results
路径上的搜索组件使用
urlparms
属性，并设置URL查询字符串。您可以使用DataSearch的
onValueSelected
prop来获取此信息@sidi-你能再看看我的代码沙盒吗-做了一些改变，我相信我做到了你说的，我仍然有同样的问题。查询的值仍然未定义，并且结果不是基于用户提交的查询
if (redirect) {
      return (
        <Redirect
          to={{
            pathname: "/results",
            search: `?q=${value}`
          }}
        />
      );
    }