Reactjs Algolia：打开抽屉时重置细化

我正在用Algolia开发我的市场，我使用这个例子作为支持。

在移动模式下，由于有抽屉，过滤器可见

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

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

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

const SearchBox=（{currentRefineration，refine}）=>(
优化（event.currentTarget.value）}
/>
);

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

有人知道为什么精化会用自定义小部件重置自己吗

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

示例：>

---

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

在上面的示例中，->由@Newtchuck提供，从应用程序的作用域中删除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

const SearchBox=（{currentRefineration，refine}）=>(
优化（event.currentTarget.value）}
/>
);
const CustomSearchBox=connectSearchBox（SearchBox）
const App=（）=>{....//代码的其余部分与示例相同

您解决了问题吗？是的，我解决了！要解决这个问题，我需要将algolia小部件导出到我的应用程序之外components@Newtchuck你能提供更多关于你如何解决这个问题的信息吗？也许用一个片段或解释来回答你自己的问题？