使用 ReactiveSearch 提交搜索查询

Question

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

这是我的数据搜索

<DataSearch
placeholder="Search..."
componentId="q"
dataField={["firstname"]}
queryFormat="or"
className="navbar-search-box"
icon={(<i className="fa fa-search fa-lg" style={searchIcon}></i>)}
showIcon={true}
iconPosition="right"
URLParams={true}
innerClass={{
title: "text-title",
input: "text-input",
list: "text-item"
}}
react = {{
"or": ["q"]
}}
onValueSelected={(value, cause, source) => {
this.setState({redirect:true});
}
}
onQueryChange = {
(prevQuery, nextQuery) => {
console.log('prevQuery', prevQuery);
console.log('nextQuery', nextQuery);
}
}
...

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

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

Warning: Each child in an array or iterator should have a unique "key" prop.

也许这与搜索查询不起作用有关？不确定。

Answer 1

每当组件的查询更改时都会触发onQueryChange。在这里，您必须检查onValueSelected中的cause，然后处理更新的查询。例如：

演示

<DataSearch
...
onValueSelected={(value, cause, source) => {
if (cause !== 'SUGGESTION_SELECT') {
// use this.query
console.log('use', this.query);
this.setState({
redirect: true
});
} else {
this.valueSelected = true;
}
}}
onQueryChange={(prevQuery, nextQuery) => {
this.query = nextQuery;
if(this.valueSelected) {
// use this.query
console.log('use', this.query);
this.valueSelected = false;
this.setState({
redirect: true
});
}
}}
/>

解释

当选择值的原因不是建议选择(即可以按键(时，onQueryChange已经更新了可以直接在onValueSelected中使用的this.query。但是，如果选择值的原因SUGGESTION_SELECT，则查询必须在选择后更新。在这种情况下，我只是设置一个标志this.valueSelected，以委派查询处理逻辑，然后在onQueryChange中读取。

简而言之，对于建议选择，流程从onValueSelected到onQueryChange，对于其他原因(包括回车键(，我们已经在this.query中获得了来自onQueryChange的查询，因此它在onValueSelected中得到处理。希望这有帮助。

至于发送搜索请求，没有必要使用appbase-js，一个简单的fetch请求也可以。如果您使用的是appbase-js那么您可以使用search方法来简化 API 文档。