问题描述
使用 React InstantSearch,我尝试 a) 使用自定义搜索框和 b) 访问 searchState(以确定用户是否正在搜索)。
当在搜索框中键入内容时,此代码会导致 Maximum update depth exceeded
。如评论中所示,将 CustomSearch
替换为默认的 SearchBox
可以解决问题。
代码沙盒:https://codesandbox.io/s/algolia-react-forked-rwz22?file=/src/Search.js:253-886
const CustomSearch = () => {
const Component = connectSearchBox(({ currentRefinement,refine }) => (
<input
type="search"
style={{ border: "1px solid black" }}
value={currentRefinement}
onChange={(e) => refine(e.currentTarget.value)}
/>
));
return <Component />;
};
function Search() {
const [searchState,setSearchState] = React.useState({});
return (
<InstantSearch
onSearchStateChange={setSearchState}
searchState={searchState}
searchClient={searchClient}
indexName="movies"
>
<CustomSearch /> {/* <SearchBox/> works*/}
</InstantSearch>
);
}
Here 是 connectSearchBox
文档,here 是有关受控模式下 InstantSearch 的简短说明。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)