Question

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

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

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

第二，我尝试使用useEffect挂钩，将重定向状态更改为false。并更改网址。但不呈现结果组件。 useEffect（（）=> {setRedirect（false）}，[重定向]）

最后，我尝试制作另一个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路径上键入一些查询参数时，它可以工作。

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

0 个答案: