Question

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

基本上，在我的首页('/')上，我只有一个DataSearch组件，该组件可用于提供自动填充功能（类似于google.com）。选择建议后，它将重定向（使用RR4）到/ results路由，该路由是ReactiveList组件。我的全局标头（Navbar.js）中也有一个相同DataSearch组件的副本，该副本是根据路线有条件呈现的-除('/')以外的所有路线上都会显示。

一切都在发生：

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

不确定发生了什么...

我从我的应用程序中获取了相关代码（路线和组件），并做了codesandbox来演示我正在描述的行为。

Answer 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}`
          }}
        />
      );
    }

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

有时候，当您对代码进行几天的工作后，您只需要再看一遍即可。

通过ReactiveSearch与其他人进行交流！很棒的Elasticsearch UI库。

ReactiveSearch查询和结果行为

1 个答案: