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'-搜索就可以工作。 自動完成功能似乎可以正常運行，但是ReactiveList不會根據用戶查詢顯示結果。

我是否需要向DataSearch或...添加另一個屬性？ 我要去哪里錯了。

Answer 1

不同的組件不應具有相同的ID。 將您的ReactiveList的componentId設置為唯一的值（並為DataSearch選擇其他唯一的ID）。 不確定設置中是否還有其他問題，但是您可以立即修復。