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'-搜索就可以工作。自动完成功能似乎可以正常运行，但是ReactiveList不会根据用户查询显示结果。

我需要向DataSearch或...添加另一个属性吗？我要去哪里错了。

Answer 1

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

ReactiveSearch组件和传递状态/道具

1 个答案: