Algolia：打开抽屉时重置细化

Question

我正在使用 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

Answer 1

对于即时搜索自定义小部件，它们需要在反应组件之外定义，以确保重新呈现不会重置搜索状态。

在上面的示例中 -> https://stackblitz.com/edit/react-8dpccc 由 @Newtchuck 提供，从 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

Algolia：打开抽屉时重置细化

Algolia: Reset of refinement when opening a drawer

reactjs

algolia

instantsearch.js

react-instantsearch