reactjs - 无法重定向到搜索结果页面

Question

我不擅长英语，所以可能很难解释我的意图。

我正在使用 React、React 路由器、Apollo 客户端，在生产构建中，当我单击搜索按钮时，由于错误消息错误：超出最大更新深度，我无法重定向以呈现结果组件。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制了嵌套更新的数量以防止无限循环。

首先，我尝试不使用useEffect。如上所述发生错误。

其次，我尝试使用 useEffect 挂钩，将重定向状态更改为 false。它改变了网址。但不渲染结果组件。useEffect(() => {setRedirect(false)}, [redirect])

最后，我尝试在没有 apollo 的情况下制作另一个 react 应用程序来测试这种情况，以及一些用于生产构建中干净代码的自定义组件。我在开发版本中尝试过。它完美无误地工作

// search-bar.js
function SearchBar(props) {
  // keywords for searching books
  const [keywords, setKeywords] = useState('');
  // search option
  const [option, setOption] = useState('All');
  // determine to redirect or not
  const [redirect, setRedirect] = useState(false);

  return (
    <>
      <div className="nav-search">
        <form
          role="search"
          onSubmit={ e => {
            e.preventDefault();
            setRedirect(true);
          }}
          className="form-search"
        >

          <NotRequiredInput
            type="search"
            label="Search keywords: "
            id="keywords"
            value={keywords}
            onChange={e => {
              setKeywords(e.target.value);
            }}
          />

          // it map the list's items to option
          <SelectBoxWithoutNone
            label="Search option: "
            id="search-option"
            value={option}
            onChange={e => {
              setOption(e.target.value);
            }}
            list={['All', 'Title', 'Author']}
          />

          <SubmitButton label="Search" />
        </form>
      </div>
      { redirect && <Redirect to={`/search?o=${option}&k=${keywords}`} /> }
    </>
  );
}

// app.js
<Query>
  {({loading, data}) => {
    if (loading)
    return (
      <Header>
      <NavBar>
      <main>
        <Suspense>
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route path="/search" render={props => <SearchResult {...props}/>}
    )
  }}
  // app.js looks like this with many route component.
  // also using React.lazy for code splitting

// search-result.js
function SearchResult (props) {
  const parsed = queryString.parse(props.location.search);
  const option = parsed.o;
  const keywords = parsed.k;

  return (
    <div className="div-search-result">
      <p>{option}</p>
      <p>{keywords}</p>
    </div>
  );
}

我希望它呈现结果组件（带或不带钩子），但如上所述，它发生了错误

更新：当我尝试直接在 url 路径上键入一些查询参数时，它可以工作。

标签： reactjsreact-router