Algolia React InstantSearch Hits组件状态不持久的原因及解决方法

问题原因 #

关闭React Bootstrap的Offcanvas时，组件会卸载内部所有子元素，包括你放在里面的RefinementList。而React InstantSearch的筛选状态是和RefinementList组件实例绑定的，组件被销毁后，之前选择的筛选条件就会丢失，导致Hits组件的状态被重置。

解决方案 #

方案一：启用Offcanvas的keepMounted属性 #

React Bootstrap的Offcanvas提供了keepMounted属性，设置为true后，即使Offcanvas关闭，内部组件也不会被卸载，只会通过CSS隐藏。这样RefinementList的筛选状态就能一直保留。

修改Offcanvas部分的代码：

<Offcanvas show={show} onHide={handleClose} keepMounted>
  <Offcanvas.Header closeButton>
    <Offcanvas.Title>Offcanvas</Offcanvas.Title>
  </Offcanvas.Header>
  <Offcanvas.Body>
    <RefinementList attribute="brand" />
  </Offcanvas.Body>
</Offcanvas>

方案二：手动控制筛选组件的显示（不依赖Offcanvas卸载） #

如果不想让Offcanvas始终挂载内部组件，可以将RefinementList移到Offcanvas外部，通过CSS控制它的显示和隐藏，避免组件被卸载。这种方法需要自己实现侧边栏的样式，示例如下：

function App() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <InstantSearch searchClient={searchClient} indexName="react_demo_01">
        <Button variant="primary" onClick={handleShow} className="me-2">
          Open
        </Button>
        <Hits hitComponent={Hit} />

        {/* 原Offcanvas作为遮罩和容器，内部不放置筛选组件 */}
        <Offcanvas show={show} onHide={handleClose}>
          <Offcanvas.Header closeButton>
            <Offcanvas.Title>Offcanvas</Offcanvas.Title>
          </Offcanvas.Header>
          <Offcanvas.Body></Offcanvas.Body>
        </Offcanvas>
        
        {/* 独立的筛选组件，用CSS控制显示隐藏 */}
        <div style={{ 
          display: show ? 'block' : 'none',
          position: 'fixed',
          top: 0,
          right: 0,
          width: '300px',
          height: '100vh',
          background: '#fff',
          padding: '1.5rem',
          boxShadow: '-2px 0 5px rgba(0,0,0,0.1)'
        }}>
          <RefinementList attribute="brand" />
          <Button variant="secondary" onClick={handleClose} className="mt-3">
            关闭筛选
          </Button>
        </div>
      </InstantSearch>
    </>
  );
}

推荐优先使用方案一，它更简洁且符合React Bootstrap的组件设计逻辑。

内容的提问来源于stack exchange，提问作者PussInBoots