ReactiveSearch查询与结果行为

Question

我试图让我的搜索应用程序与ReactiveSearch一起工作，并遇到一些麻烦(可能我缺乏理解)。还在学习)。

基本上，在我的主页('/')上，我所拥有的只是一个DataSearch组件，用于提供自动完成(非常像google.com)。当选择建议时，它会将(使用RR4)重定向到/results路由，这是一个ReactiveList组件。在my (Navbar.js)中也有一个相同的Navbar.js组件的副本是根据路由有条件地呈现的，除了('/')之外，每个路由上都有显示。

有几件事正在发生：

1. 当我从下拉路径'/'中进行查询选择，然后重定向到'/results路由时，DataSearch文本输入不是空的--前面选择的查询在那里，它没有提供任何新的建议，并且显示的结果是基于所选查询的 not 。
2. 在ResultList页面上的/results组件中没有显示基于所选查询的实际搜索结果--无论是来自'/'还是'/results (显示建议)，而不是查询选择后的实际搜索结果。
3. 如果我转到/results (单击Navbar中的链接)，页面会自动显示ES索引--即使不执行查询？

不知道发生了什么..。

我从我的应用程序中提取了相关的代码(路线和组件)，并制作了一个码箱来演示我所描述的行为。

Answer 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});。最后，我还遗漏了else子句中的第二个this.setState({ value });。

在“/”和“/结果/路线”的if语句中：

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

我错过了<Redirect>在return ()。

有时候，当您已经对代码进行了几天的研究时，您只需要对代码再做一次观察。

ReactiveSearch的其他人！伟大的用户界面库的弹性搜索。