Algolia：打开抽屉时重置细化答案

【问题标题】：Algolia: Reset of refinement when opening a drawerAlgolia：打开抽屉时重置细化
【发布时间】：2020-10-07 07:31:23
【问题描述】：

我正在使用 Algolia 开发我的市场，并使用此示例作为支持。 https://react-instantsearch.netlify.app/examples/e-commerce/

在移动模式下，过滤器通过抽屉可见。

在我的应用中，我为每个小部件制作了自定义 UI。例如，当我使用 SearchBox 进行研究并打开过滤器抽屉时，搜索会被重置。

但是当我使用小部件（而不是海关）进行操作时，搜索不会重置。它认为这是我在自定义组件中的错误，所以我尝试使用 Algolia 的文档示例。我也有同样的结果

const SearchBox = ({ currentRefinement, refine }) => (
  <input
    type="search"
    value={currentRefinement}
    onChange={event => refine(event.currentTarget.value)}
  />
);

要遵循我的设计，我真的需要做一个自定义小部件。

有谁知道为什么使用自定义小部件重新设置细化？

我也尝试过路由 URL，但我有一个带有自定义小部件的无限循环 ^^""

示例：>https://stackblitz.com/edit/react-8dpccc

Algolia's example mobile first page

【问题讨论】：

您的问题解决了吗？
是的，我做到了！为了解决这个问题，我需要将 algolia 小部件导出到我的组件之外
@Newtchuck 你能提供更多关于你如何解决这个问题的信息吗？也许用 sn-p 或解释来回答您自己的问题？

标签： reactjs algolia instantsearch.js react-instantsearch

【解决方案1】：

对于 Instantsearch 自定义小部件，它们需要在 React 组件之外定义，以确保重新渲染不会重置搜索状态。

在上面的示例中 -> @Newtchuck 提供的 https://stackblitz.com/edit/react-8dpccc 从 App 的范围中删除 SearchBox 自定义小部件并将其添加到顶部应该可以解决问题

const SearchBox = ({ currentRefinement, refine }) => (
  <input
    type="search"
    value={currentRefinement}
    onChange={event => refine(event.currentTarget.value)}
  />
);

const CustomSearchBox = connectSearchBox(SearchBox)


const App = () => {.... // rest of the code same as the example

【讨论】：