限制导航以防止浏览器在 React App 中挂起

Posted 2023-02-21

【中文标题】限制导航以防止浏览器在 React App 中挂起

【英文标题】：Throttling navigation to prevent the browser from hanging in React App

【发布时间】：2019-11-02 04:01:51

【问题描述】：

我正在使用 React 进行登录/注册，并且正在使用 firebase auth 进行身份验证。当用户登录时，我想在根路径或 App 组件上重定向用户。但是我进入了一个无限循环，这给了我这个错误（限制导航以防止浏览器挂起。）

    import React,  useEffect  from "react";
    import ReactDOM from "react-dom";
    import "semantic-ui-css/semantic.min.css";
    import App from "./App";
    import firebase from "firebase";
    import  BrowserRouter, Switch, Route, withRouter  from "react- 
router-dom";
    import Login from "./components/Login";
    import Register from "./components/Register";

    const Root = props => 
      useEffect(() => 
        firebase.auth().onAuthStateChanged(user => 
          if (user) 
            props.history.push("/");
          
        );
      );
      return (
        <Switch>
          <Route exact path="/" component=App />
          <Route path="/login" component=Login />
          <Route path="/register" component=Register />
        </Switch>
      );
    ;

    const RootWithAuth = withRouter(Root);

    ReactDOM.render(
      <BrowserRouter>
        <RootWithAuth />" "
      </BrowserRouter>,
      document.getElementById("root")
    );

【参考方案1】：

你的问题在useEfect，来自React：

如果你熟悉 React 类生命周期方法，你可以想 useEffect Hook 为 componentDidMount、componentDidUpdate 和 componentWillUnmount 组合。

您的无限循环是因为您当前使用 useEfect 也作为 componentDidUpdate，只需在 useEfect 末尾添加 [ ] ，这将导致 useEfect 充当 componentDidMount。

useEffect(() => 
        firebase.auth().onAuthStateChanged(user => 
          if (user) 
            props.history.push("/");
          
        );
      , []);

【讨论】：

我忘了把它放在那里，但最后，它对我有用。非常感谢