Question

最近，我开始在网站上使用Appbase.io的Reactivesearch和Reactivemaps来搜索商品数据库并进行渲染等。大多数组件都可以正常工作，而有些组件则存在一些小错误。所以最近我将组件移到了自己的组件中，然后将其放在导航栏上以进行全局访问。然后我遇到的问题是“如何使用搜索值路由回到我的/ explore页面？”。显然，它并不像我想的那么简单。

我使用功能toPath设置搜索页面，该函数获取路径和来自onValueSelected的值

  toPath(path, obj) {
    this.props.history.push(`${path}?q="${obj.term}"`);
    console.log('SearchVal: ',obj)
  }

请注意，之所以添加了term，是因为其object.term和term是来自搜索的字符串。

因此，我尝试这样做，并在URLParams={true}和<ReactiveGoogleMap/>上分别设置了<CategorySearch/>和我选择的值，它将我带到/ explore页面，但是地图以弹性数据库的项目0。

我尝试了其他一些方法，仅传递对象，删除URLParams等。似乎没有任何作用。

如果任何人都知道如何实现这一目标，我将不胜感激，这只是一个小问题，但仍然是一个问题，文档缺乏如何做到这一点的方法/任何公开的例子。

这是当前配置：

toPath(path, obj) {
   this.props.history.push(`${path}?q="${obj.term}"`);
   console.log('SearchVal: ',obj)
}

<CategorySearch
    className="searchbar"
    dataField={["restaurantName"]}
    categoryField="city.keyword"
    placeholder='Let's Search"'
    componentId="q"
    URLParams={true}
    ...

<ReactiveGoogleMap
   componentId="map"
   dataField="location"
   stream={true}
   defaultZoom={13}
   pagination
   autoCenter={false}
   onPageChange={() => {
     window.scrollTo(0, 0);
   }}
   style={{

   }}
   onPopoverClick={this.onPopoverClick}
   className="rightCol"
   showMarkerClusters={false}
   showSearchAsMove={false}
   searchAsMove={true}
   //this.props.location.state.reactive_s
   //The old way I passed the object I used this ^
   react={{
    and: [
     "q"
    ],
   }}

此外，我不确定是否有人能得到这个，但是我从@emotion那里得到了这些持续存在的问题，这也是Reactivesearch的问题

serialize.browser.cjs.js:149 Functions that are interpolated in css calls will be stringified.
If you want to have a css call based on props, create a function that returns a css call like this
let dynamicStyle = (props) => css`color: ${props.color}`
It can be called directly with props or interpolated in a styled call like this
let SomeComponent = styled('div')`${dynamicStyle}`

这也是reactsearch的问题，使其很难工作，因为您不能完全隐藏它而不隐藏其他所有内容。每次单击和滚动具有反应组件的页面时都会发生这种情况。仅在开发分支上，绝不在编译的版本上。

Reactivesearch和Reactivemaps搜索路由

0 个答案: