0

我的 SearchContainer 中有一个 ReactiveList 组件。它所做的只是根据用户查询显示搜索结果。ReactiveList 组件有效，它会自动显示我的 ES 索引（托管在 Appbaseio）的内容。它不会根据用户提交的查询显示结果。

在我的全局导航栏中，我有一个提供自动完成功能的 DataSearch 组件（根据路由有条件地呈现）。我的主页 ('/') 中也有一个几乎相同的 DataSearch 组件。

我试图弄清楚如何将查询从 DataSearch 传递到 ReactiveList，以便显示的结果实际上是基于用户提交的查询？

所以让我重申一下，我正试图弄清楚如何让 DataSearch 和 ReactiveList 相互交谈。

在我的 DataSearch 组件中，我有

<DataSearch
    componentId="q"
    URLParams={true}
    onValueSelected={(value, cause, source) => {
      if (cause !== 'SUGGESTION_SELECT') {
        <Redirect to={{
        pathname: '/search',
        search: `?q=${value}`
        }}/>;            
       } else {
         this.valueSelected = true;
       }
     }}
     ...
     />

在我的 ReactiveList 组件中，我有：

<ReactiveList
  componentId="q"
  URLParams={true}
  onNoResults="Sorry, no results were found, try searching again."
  react={{ or: ["q"] }}
  onData={(res) => { ... }}
  ...
  />

据我了解，只要我在 DataSearch 中有 URLParams={true} 并且在 DataSearch 和 ReactiveList 中有 componentId='q' - 搜索应该可以工作。自动完成似乎可以正常工作，但 ReactiveList 没有根据用户查询显示结果。

我需要向 DataSearch 添加另一个属性还是...？我哪里错了。

4

1 回答 1

0

不同的组件不应具有相同的 ID。将 ReactiveList 的 componentId 设置为唯一的（并为 DataSearch 选择不同的唯一 ID）。不确定设置中是否还有其他问题，但您可以立即修复。

于 2018-11-06T15:09:12.397 回答