reactjs - 具有自定义输入元素的受控模式下的 InstantSearch 会导致最大更新深度错误

Question

使用 React InstantSearch，我正在尝试 a) 使用自定义搜索框和 b) 访问 searchState（以确定用户是否正在搜索）。

当在搜索框中输入内容时，此代码会导致Maximum update depth exceeded。如评论中所示，替换CustomSearch为默认值Searchbox可以解决问题。

Codesandbox：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>
  );
}

这是connectSearchBox文档，这里是关于受控模式下的 InstantSearch 的简短描述。