Reactjs Algolia-关闭模式时存储优化列表值

我正在用algolia建立一个过滤模式。在这个过滤器模式上，我有一个标准的优化列表（见下面的代码）。当用户点击模式上的“搜索”时，精炼列表值丢失（即未应用于我的组件），但没有关于如何存储精炼列表输出的指南

我想要的是，当我关闭我的模式时，基本上不清除我的优化列表值

refinementlist.js

import React from 'react';

import { RefinementList } from 'react-instantsearch-dom';

const toRefine = () => {
    return (
        <div>
                <RefinementList 
                    attribute={`tags`} 
                    searchable 
                    limit={5} 
                />
        </div>
    );
};

export default toRefine;

从“React”导入React；
从“react instantsearch dom”导入{RefinementList}；
const toRefine=（）=>{
返回(
);
};
出口违约金；

filter.js

import React from 'react';
import toRefine from './toRefine';

const Filters = () => {
    return (

                <div>
                    <toRefine />
                </div>

    );
};

export default Filters;

从“React”导入React；
从“/toRefine”导入toRefine；
常量过滤器=（）=>{
返回(
);
};
导出默认过滤器；

MainPage.js

import React, { useState } from 'react';
import Hits from './hits';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch-dom';
import Modal from 'react-modal';
import Filters from './filters';

Modal.setAppElement('#root');   
const searchC = algoliasearch($ENV_VARS);

const Page = () => {
    const [ modalIsOpen, setIsOpen ] = useState(false); //Hook for modal

    function openModal() {
        setIsOpen(true);
    }
    function closeModal() {
        setIsOpen(false);
    }

    return (
        <div>
            <InstantSearch
                indexName="index" 
                searchClient={searchC}
            >
                <CustomSearchBox />
                <button onClick={openModal}>Show FILTERS</button>
                <Configure hitsPerPage={20} />
                <Hits />
                <Modal
                    isOpen={modalIsOpen}
                    onRequestClose={closeModal}
                    contentLabel="filterElement"
                    className={styles.modal}
                    overlayClassName={styles.overlay}
                >
                    <FilterPage />
                </Modal>
            </InstantSearch>
        </div>
    );
};

export default Page;

import React，{useState}来自“React”；
从“./Hits”导入命中；
从'algoliasearch/lite'导入algoliasearch；
从'react InstantSearch dom'导入{InstantSearch}；
从“反应模态”导入模态；
从“./Filters”导入筛选器；
Modal.setAppElement（“#根”）；
const searchC=algoliasearch（$ENV_VARS）；
常量页=（）=>{
const[modalIsOpen，setIsOpen]=useState（false）；//modal的钩子
函数openModal（）{
setIsOpen（真）；
}
函数closeModal（）{
setIsOpen（假）；
}
返回(
显示过滤器
);
};
导出默认页面；

每个React InstantSearch小部件负责其UI状态，需要安装。我不熟悉react modal，但从我阅读他们的文档所收集的信息来看，modal实例在关闭时会被销毁，而不是隐藏，因此

优化列表

也会被卸载

要避免这种行为，您可以做的是在小部件发生更改时（关闭模式时除外）手动持久化小部件的状态，并将其作为默认优化注入小部件

function App() {
  const [brandState, setBrandState] = React.useState([]);

  // ...

  return (
    <InstantSearch
      onSearchStateChange={(state) => {
        if (modalIsOpen && state.refinementList?.brand) {
          setBrandState(state.refinementList.brand);
        }
      }}
    >
      <Modal isOpen={modalIsOpen}>
        <RefinementList
          defaultRefinement={brandState}
          attribute="brand"
        />
      </Modal>
    </InstantSearch>
  );
}

你可以在这本书中看到它的作用

import { connectRefinementList } from 'react-instantsearch-dom';

// ...

const VirtualRefinementList = connectRefinementList(() => null);

function App() {
  // ...

  return (
    <InstantSearch
      onSearchStateChange={(state) => {
        if (modalIsOpen && state.refinementList?.brand) {
          setBrandState(state.refinementList.brand);
        }
      }}
    >
      <VirtualRefinementList defaultRefinement={brandState} attribute="brand" />
      {/* ... */}
    </InstantSearch>
  );
}