ReactiveSearch组件和传递状态/属性

Question

我的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‘，搜索就应该可以工作。Autocomplete似乎可以正常工作，但ReactiveList不能根据用户查询显示结果。

我是否需要将另一个属性添加到DataSearch或...？我哪里错了？

Answer 1

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