Как сохранить предыдущее состояние React InstantSearch - PullRequest
Новая
       19

Как сохранить предыдущее состояние React InstantSearch

0 голосов
/ 31 марта 2020 
import React, { Component, useState } from 'react';
import algoliasearch from 'algoliasearch/lite';
import {
  InstantSearch,
  Hits,
  SearchBox,
  Highlight,
  connectRefinementList,
} from 'react-instantsearch-dom';
import PropTypes from 'prop-types';
import './App.css';

const searchClient = algoliasearch(
  'test',
  'test'
);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedCountries: []
    }
  }
  render() {
    const RefinementList = ({
      items,
      isFromSearch,
      refine,
      searchForItems,
      createURL,
    }) => {
      return (
        <ul style={{ listStyle: 'none' }}>
          {
            items &&
            items.map(item => (
              <li key={item.label}>
                <input
                  type="checkbox"
                  checked={item.isRefined}
                  // href={createURL(item.value)}
                  style={{ fontWeight: item.isRefined ? 'bold' : '' }}
                  onChange={event => {
                    // event.preventDefault();
                    refine(item.value);
                  }}
                />
                {isFromSearch ? (
                  <Highlight attribute="label" hit={item} />
                ) : (
                    item.label
                  )}{' '}
                ({item.count})

              </li>
            ))}
        </ul>
      )
    };

    const CustomRefinementList = connectRefinementList(RefinementList);

    return (
      <div className="container">

        <InstantSearch searchClient={searchClient} indexName="parterns">
          <div className="search-panel">
            <div className="search-panel__results">
              <SearchBox
                className="searchbox"
                translations={{
                  placeholder: '',
                }}
                searchAsYouType={false}
              />
              <Hits hitComponent={Hit} />
              <br />
              <br />
              <button onClick={(e) => {
                const that = this;
                e.preventDefault();
                that.setState({
                  selectedCountries: Array.from(new Set([...that.state.selectedCountries, 'India']))
                })
              }
              }
              >
                Select India
              </button>
              <br />
              <button onClick={(e) => {
                const that = this;
                e.preventDefault();
                that.setState({
                  selectedCountries: Array.from(new Set([...that.state.selectedCountries, 'USA']))
                })
              }
              }
              >
                Select Usa
              </button>
              <br />
              <h3>Location</h3>
              <div className="region">
                <CustomRefinementList
                  operator="or"
                  limit={10}
                  defaultRefinement={[]}
                  attribute="region" />
              </div> <br />

                <CustomRefinementList
                  operator="or"
                  limit={this.state.selectedCountries.length}
                  defaultRefinement={this.state.selectedCountries}
                  attribute="country" />
              <br />
              <br />
            </div>
          </div>
        </InstantSearch>
      </div>
    );
  }
}

function Hit(props) {
  return (
    <article onClick={() => alert(props.hit.title)}>
      <h1>
        <Highlight attribute="title" hit={props.hit} />
      </h1>
    </article>
  );
}

Hit.propTypes = {
  hit: PropTypes.object.isRequired,
};

export default App;

Проблема в том, что все ранее выбранные фильтры очищаются.

Например, сначала я нажимаю на фильтр, например: Северная Америка Поэтому я получу отфильтрованные результаты для Северная Америка .

Теперь я хочу иметь фильтр Страна, который будет виден при нажатии на кнопку ex Выбрать США

Когда я нажимаю на кнопку для экс : Выберите США, затем я устанавливаю состояние, потому что хочу динамически отображать его, но проблема в том, что предыдущее состояние очищается, как я могу сохранить предыдущее состояние для компонента.

...