2

我正在使用 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 的示例移动首页

4

1 回答 1

1

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

在上面的示例中 - > 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
于 2020-12-15T06:51:44.623 回答