Reactivesearch & Reactivemaps поисковая маршрутизация - PullRequest
Новая
       16

Reactivesearch & Reactivemaps поисковая маршрутизация

1 голос
/ 11 февраля 2020

Недавно я начал использовать Reactivesearch и Reactivemaps от Appbase.io на моем веб-сайте для поиска в моей базе данных элементов и их рендеринга и так далее. Большинство компонентов работают должным образом, а некоторые имеют незначительные ошибки. Недавно я переместил свой компонент в его собственный компонент, а затем поместил его на панель навигации для глобального доступа. Проблема, с которой я столкнулся, заключалась в том, «как я могу перенаправить обратно на свою страницу / страницу исследования с моим значением поиска?». Очевидно, что это не так просто, как я думал.

Я настроил страницу поиска с помощью функции toPath, которая берет путь и значение, полученное из onValueSelected 

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

Обратите внимание, что термин добавляется, потому что это object.term, а term это строка из вашего поиска.

Так что я пробую это, и у меня есть URLParams={true} на моем наборе <ReactiveGoogleMap/> и <CategorySearch/>, и я выбираю свое значение, и оно забирает меня на страницу / исследовать, но моя карта сосредоточена на элементе 0 базы данных elasti c.

Я пробовал несколько других методов, передавая только объект, удаляя URLParams и так далее. Ничто не похоже на работу.

Если у кого-то есть идея, как этого можно достичь, я был бы очень признателен, это просто небольшая проблема, но все еще проблема в будущем, и в документации не хватает того, как это сделать / какие-либо примеры для публикации c.

Вот текущая конфигурация: 

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}`

Это также проблема с реактивным поиском, из-за которой очень трудно работать, потому что вы не можете точно скрыть это, не скрывая ничего другого. Это происходит с каждым кликом и прокруткой страницы, на которой есть реактивный компонент. Только для веток разработчиков, но не для скомпилированных сборок.

...