问题标签 [reactivesearch]

我一直在使用 ReactiveSearch 构建搜索 UI。我试图弄清楚如何提交实际的搜索查询。我一直在使用 DataSearch 组件，因为它内置了自动完成功能（只需将其设置为 true！）。自动完成工作正常。显示了建议，我可以选择它们，但是当我通过单击或按 Enter 选择建议时，没有实际的搜索结果。

这是我的数据搜索

我假设我不需要使用他们的 appbase-js 库来向 ES 提交全文搜索查询。我假设只要您为dataField属性分配了一个值，DataSearch 组件就会将查询放在一起。

当我尝试提交查询时，我也会收到此错误：

也许这与搜索查询不起作用有关？没有把握。

我正在使用 Localstorage.getItem 创建具有动态 defaultSelected 值的 RangeSlider。我在反应模态中使用 rangeSlider 所以我需要当用户打开模型并使用范围滑块创建过滤器时，状态保存在 LocalStorage 中，当用户再次打开模态时他得到 rangeSlider 最后他在开始和结束时选择的值这是我的代码：

当我像这样使用 defaultSelected 的静态值进行测试时

console.log() 显示：

但是当我想要用户在关闭模态时选择的值时，我与此绑定：

但我得到这个错误：

未捕获的 SyntaxError： JSON.parse ()
在 ProxyComponent.render (PriceFilterModal.js:91)
在 ProxyComponent.hotComponentRender (react-hot-loader.development.js:620)
在 ProxyComponent.proxiedRender (react-hot )的 JSON 输入意外结束-loader.development.js:635)
在 finishClassComponent (react-dom.development.js:13194)
在 updateClassComponent (react-dom.development.js:13156)
在 beginWork (react-dom.development.js:13825)
在 performUnitOfWork (react-dom.development.js:15864)
在工作循环 (react-dom.development.js:15903)
在 HTMLUnknownElement.callCallback (react-dom.development.js:100)
在 Object.invokeGuardedCallbackDev (react-dom.development. js:138)
在 invokeGuardedCallback (react-dom.development.js:187)
在 replayUnitOfWork (react-dom.development.js:15311)
在 renderRoot (react-dom.development.js:15963)
在 performWorkOnRoot (react-dom.development.js: 16561)
在 performWork (react-dom.development.js:16483)
在 performSyncWork (react-dom.development.js:16455)
在 requestWork (react-dom.development.js:16355)
在 scheduleWork$1 (react-dom.development .js:16219)
在 scheduleRootUpdate (react-dom.development.js:16786)
在 updateContainerAtExpirationTime (react-dom.development.js:16813)
在 updateContainer (react-dom.development.js:16840)
在 ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17123)
在 react-dom.development.js:17263
在 unbatchedUpdates (react- dom.development.js:16680)
在 legacyRenderSubtreeIntoContainer (react-dom.development.js:17259)
在渲染 (react-dom.development.js:17318)
在 renderApp (index.js:11)
在 Object. (index.js:19)
在 Object../src/index.js (index.js:10)
在webpack_require (bootstrap c230f6f2604486566c3b:678)
在 fn (bootstrap c230f6f2604486566c3b:88)
在 Object.0 (index.less?83e0 :26)
在webpack_require (bootstrap c230f6f2604486566c3b:678)
在引导 c230f6f2604486566c3b:724
在引导 c230f6f2604486566c3b:724

渲染 @ PriceFilterModal.js:91
hotComponentRender @ react-hot-loader.development.js:620
proxiedRender @ react-hot-loader.development.js:635
finishClassComponent @ react-dom.development.js:13194
updateClassComponent @ react-dom。 development.js:
13156 beginWork @ react-dom.development.js:13825
performUnitOfWork @ react-dom.development.js:15864
workLoop @ react-dom.development.js:15903 callCallback @ react-dom.development.js:100 invokeGuardedCallbackDev @ react-dom.development.js:138 invokeGuardedCallback @ react-dom.development.js:187 replayUnitOfWork @ react-dom。 development.js:15311 renderRoot @ react-dom.development.js:15963 performWorkOnRoot @ react-dom.development.js:16561 performWork @ react-dom.development.js:16483 performSyncWork @ react-dom.development.js:16455 requestWork @ react-dom.development.js:16355 scheduleWork$1 @ react-dom.development.js:16219 scheduleRootUpdate @ react-dom.development.js:16786 updateContainerAtExpirationTime @ react-dom.development.js:16813 updateContainer @ react-dom。 development.js:16840 ./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot。渲染@react-dom.development.js:17123（匿名）@react-dom.development.js:17263 unbatchedUpdates@react-dom.development.js:16680 legacyRenderSubtreeIntoContainer@react-dom.development.js:17259 渲染@react- dom.development.js:17318 renderApp@index.js:11（匿名）@index.js:19 ./src/index.js@index.js:10 webpack_require @ bootstrap c230f6f2604486566c3b:678 fn @ bootstrap c230f6f2604486566c3b:88 0 @ index.less?83e0:26 webpack_require@bootstrap c230f6f2604486566c3b:678（匿名）@bootstrap c230f6f2604486566c3b:724（匿名）@bootstrap c230f6f2604486566c3b:724 index.js:2178 上述错误发生在组件中：（PriceFilterModal（由ConnectFilterModal创建）inConnect(PriceFilterModal)在 DefaultPage.js:36) 在 div 中 (在 DefaultPage.js:31) 在 DefaultPage (由 Connect(DefaultPage) 创建) 在 Connect(DefaultPage) (由 Route 创建) 在 Route (在 Root.js:32) 在 Switch (在 Root.js:41) 中的 div (在 App.js:33) in div (由 Styled(div) 创建) in Styled(div) (由 URLParamsProvider 创建) 在 URLParamsProvider (由 Connect(URLParamsProvider) 创建) in Connect(URLParamsProvider) (由 ReactiveBase 创建) 在 Provider (由 ReactiveBase 创建) ThemeProvider（由 ReactiveBase 创建）在 ReactiveBase（在 App.js:29）在 div（在 App.js:27）在 App（在 Root.js:27）在 Route（在 Root.js:25）在 Switch（创建by Root) 在Router 中（由ConnectedRouter 创建） 在ConnectedRouter 中（由Root 创建） 在Provider 中（在Root.js:52 中） 在Root 中在AppContainer 中（在index.js:12 中）27) 在 App 中 (在 Root.js:27) 在 Route (在 Root.js:25) 在 Switch (由 Root 创建) 在 Router (由 ConnectedRouter 创建) 在 ConnectedRouter (由 Root 创建) 在 Provider (在 Root.js :52) 在 AppContainer 的根目录中 (在 index.js:12)27) 在 App 中 (在 Root.js:27) 在 Route (在 Root.js:25) 在 Switch (由 Root 创建) 在 Router (由 ConnectedRouter 创建) 在 ConnectedRouter (由 Root 创建) 在 Provider (在 Root.js :52) 在 AppContainer 的根目录中 (在 index.js:12)

使用 Firefox，我得到：

SyntaxError: JSON.parse: JSON 数据的第 1 行第 1 列的数据意外结束

我在一个反应​​网络应用程序上使用反应式搜索，我试图找到一种方法，能够从“所有项目”切换到“最喜欢的项目”，我有一个 ID 数组。

我尝试了三种不同的策略，但没有一个看起来令人满意：

1. 我已经设置了一个 DataController，其中包含关于“术语”的自定义查询，但它只能以一种方式工作：我可以过滤项目，但我不能取消过滤它们并返回未过滤的项目。

2. 我还尝试将多列表下拉列表与 defaultSelected 道具一起使用，但是如果我清除过滤器，我将找不到以编程方式设置值的方法。

3. 最终，我可以在 onData 函数中提供我自己的过滤器，并选择显示/不显示该项目是否出现在 id 列表中 - 但这感觉很老套，如果可能的话，我更愿意将功能直接集成到 reactiveBase .

实现这一目标的最佳策略是什么？

我有一个 Elasticsearch 集群，实时事件涌入其中。我认为我能够实现的是在事件进入时显示事件ReactiveListin ReactiveSearch。这是我大致拥有的：

ReactiveList每当我对其中一个传感器（即过滤器）进行更改时，我都可以看到组件中反映的更改。stream但是，每当数据库更改时，它们都不会更新，我曾假设启用它会这样做：

该列表可以根据其他组件的更改或数据库本身的更改进行反应性更新。

两个问题：

1. 我是否误解了这个组件应该如何工作，或者我需要做其他事情才能看到结果中自动反映的 ES 集群的更新？
2. 除非设置/选择了某个传感器（例如从组件中），否则是否可以不DataSearch加载结果？

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

基本上在我的主页上('/')，我只有一个用于提供自动完成功能的 DataSearch 组件（很像 google.com）。当一个建议被选中时，它会重定向（使用 RR4）到 /results 路由，它是一个 ReactiveList 组件。在我的全局 Header (Navbar.js) 中还有一个相同的 DataSearch 组件的副本是根据路由有条件地呈现的 - 显示在除('/').

有几件事正在发生：

1. 当我从主路由下拉列表中进行查询选择'/'，然后重定向到该'/results路由时，DataSearch 文本输入不为空 - 先前选择的查询在那里，它不提供任何新建议并且显示的结果不是基于根据选定的查询。

2. 页面上的 ResultList 组件不会显示基于所选查询的实际搜索结果/results- 无论是来自'/'还是'/results（显示建议 - 不是查询选择后的实际搜索结果）。

3. 如果我去/results（点击导航栏中的链接），页面会自动显示 ES 索引 - 即使没有执行查询？

不知道发生了什么...

我从我的应用程序中获取了相关代码（路由和组件）并制作了一个代码框来演示我所描述的行为。

我的反应式搜索运行良好。我把它推到了我的开发分支，我的 CI 直到昨天才抱怨。

现在我收到 ReactiveSearch 缺少 vue.js 的错误

当我查看 ReactiveSearch 项目时，似乎 vue 最近被添加到了 reactiveCore。

考虑到我正在运行一个反应应用程序，我不确定安装 vue 是一个好主意。任何帮助将不胜感激。

./node_modules/vue-types/es/utils.js 中的错误找不到
模块：错误：无法解析“/Users/ianseabock/stud-fbase/ui/node_modules/vue-types/es”中的“vue”
@ ./node_modules/vue-types/es/utils.js 2:0-22 214:4-7
@ ./node_modules/vue-types/es/index.js
@ ./node_modules/@appbaseio/reactivecore/lib/utils /vueTypes.js
@ ./node_modules/@appbaseio/reactivecore/lib/index.js
@ ./node_modules/@appbaseio/reactivesearch/lib/components/basic/ReactiveBase.js

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

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

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

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

在我的 DataSearch 组件中，我有

在我的 ReactiveList 组件中，我有：

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

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

我ReactiveList用来渲染结果。覆盖默认内联样式的最佳方法是什么？最好删除 Reactivesearch (2.13.0) 提供的所有默认样式。

例如，如何删除 sortOptions 提供的这些默认样式/packages/web/src/styles/result.js：

我刚刚使用 ReactiveSearch 构建了我的搜索 UI，只需要弄清楚如何使用 React Router 4 和 npm 包查询字符串在“/results”上显示结果。

我在这里做了一个codesandbox

我的问题是为什么userQuery未定义？我以为我正确地遵循了这个？

基本上我的 search-layout.js 是这样的：

<Route />正在呈现的 Results 组件包含 ReactiveList 组件。我知道<Results />有效并显示信息，因为我最初只是让 React 渲染它 - 只是为了确保它有效。现在我正在尝试集成 RR4 和查询字符串包，但不确定我哪里出错了。

如果我用 path="/results" 替换path = { ${match.path}?q="${userQuery}"} - 结果显示，但不是基于用户查询，它只是默认的 ReactiveList 行为。

如果我的基于 CRA 的 ReactiveSearch 应用程序结构如下：

其中/containers/search/index.js包含如下代码：

然后我自己的反应组件（autocomplete.js、results.js）ReactiveSearch根据我的应用程序的需要将这些组件作为子组件引入？

例如，我的 autocomplete.js 会DataSearch作为孩子引入，我的 results.js 会ReactiveList作为孩子引入，而 navbar.js 会引入与孩子相同的 DataSearch？

这应该使我能够在准备好时使用 React Router 4 创建不同的路由，对吧？