使用自定义输入元素在受控模式下进行 InstantSearch 会导致最大更新深度错误

如何解决使用自定义输入元素在受控模式下进行 InstantSearch 会导致最大更新深度错误

使用 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 的简短说明。