Пересчет результатов ReactiveList - PullRequest
Новая
       30

Пересчет результатов ReactiveList

0 голосов
/ 11 апреля 2020

Я пытаюсь создать поисковик с использованием библиотеки реагирующего поиска. Кто-нибудь знает, как я могу вызвать повторную визуализацию результатов ReactiveList? (например, с помощью события onClick кнопки?)

Ответы [ 2 ]

0 голосов
/ 14 апреля 2020

К сожалению, я не могу предоставить свой полный код здесь. Но я постараюсь объяснить, в чем моя проблема. В моем основном компоненте приложения у меня есть ReactiveBase, DataSearch и ReactiveList, а также несколько кнопок: 

const App = () => (
  <ReactiveBase
   app="Test"
   credentials="null"
   url="http://localhost:9200"
   analytics={false}
   searchStateHeader
   >
   <DataSearch />
   <ReactiveList
   componentId="result"
   dataField="_score"
   renderItem={renderItem}
   >
<div><Switch defaultChecked onChange={onSpeciesChange} style={{ marginRight: '5px', background: "brown" }} id="cellines"/> <label> Celline </label></div>
<div><Switch defaultChecked onChange={onSpeciesChange} style={{ marginRight: '5px', background: "blue" }} id="chemicals"/> <label> Chemicals </label></div>

Таким образом, кнопки отображаются в моем основном компоненте приложения, и у меня есть функция onSpeciesChange, которая в основном обновляет глобальный объект под названием entityswitchstatus с логическими значениями: 

function onSpeciesChange(checked,event) {
  if (event.target.id === "cellines") { entityswitchstatus.cellines=checked; }
  else if (event.target.id === "chemicals") { entityswitchstatus.chemicals=checked; }
  else if (event.target.id === "diseases") { entityswitchstatus.diseases=checked; }
  else if (event.target.id === "genes") { entityswitchstatus.genes=checked; }
  else if (event.target.id === "mutations") { entityswitchstatus.mutations=checked;}
  else if (event.target.id === "species") { entityswitchstatus.species=checked; }
  console.log(entityswitchstatus);
}

В функции renderItem компонента ReactiveList я обрабатываю ответы от Elasticsearch. И если есть определенное поле, и глобальное значение entityswitchstatus истинно, я делаю выделение другого поля ответа эластичного поиска. Все это происходит внутри функции renderItem объекта ReactiveList. 

function renderItem(res) {
if (res.ptc_species && entityswitchstatus.species) { var species_classname = createHighlighClassObject(res.ptc_species,"species"); } else { res.ptc_species = [] }
}

И, в основном, нажимая кнопки, я, конечно, могу изменить глобальный объект entityswitchstatus. Но это не приводит к повторной визуализации компонента ReactiveList, что также ожидается. Я не могу передать дополнительные реквизиты для renderItem или, по крайней мере, я не знаю, как. Поэтому моя идея состояла в том, чтобы просто вызвать повторную визуализацию компонента ReactiveList, также нажав кнопку в основном компоненте приложения.

Надеюсь, это не слишком запутанно.

0 голосов
/ 11 апреля 2020

Если у вас есть компонент класса, попробуйте код ниже 

this.forceUpdate();
...