useEffect 處於無限循環中

Question

我有一個組件，一旦它呈現，我需要將用戶重定向到另一條路徑，我正在使用 useEffect 反應鈎子，但它會一遍又一遍地渲染而不會停止：

const App: FunctionComponent<{}> = () => {
const [message, setMessage] = useState("");

  useEffect(() => {
    if (condition) {
      setMessage("you are being redirected");
      setTimeout(() => {
        location.href = `http://localhost:4000/myurl`;
      }, 2000);
    } else {
      setMessage("you are logged in");
      setTimeout(() => {
        <Redirect to={"/pages"} />;
      }, 2000);
    }
  }, [message]);

  return (
    <>
      {message}
      <BrowserRouter>
        <Route exact path="/login/stb" render={() => <Code />} />
      </BrowserRouter>
    </>
  );
};

export default App;

Answer 1

看起來setMessage正在組件中設置message state 變量。 這發生在每次運行useEffect期間。 State 更改將導致您的組件重新呈現。

基本上，導致循環的流程是這樣的：

1. 初始組件渲染
2. useEffect 運行
3. message state 已更新
4. 由於 state 更改，組件重新渲染
5. 在message更改時觸發 useEffect 運行
6. 返回第 3 步

如果您希望useEffect僅在初始渲染時運行，並在用戶登錄后重定向，您可以將其更改為如下所示：

  const [loggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    if (someConditionHere) {
      setLoggedIn(true);
  }, []);

  return (
    loggedIn ? <Redirect to={"/pages"} /> :
    <BrowserRouter>
      <Route exact path="/login/stb" render={() => <Code />} />
    </BrowserRouter>
  );

我對設置一無所知，所以這是簡化並做出一些假設。