Question

我有一个组件，一旦它被渲染，我就需要将用户重定向到另一个路径，并且我正在使用react的reactEffect钩子，但是它一遍又一遍地呈现而不停：

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状态变量。这在useEffect的每次运行期间都会发生。状态更改将导致您的组件重新呈现。

基本上，导致循环的流是这样的：

初始组件渲染
useEffect已运行
message状态已更新
由于状态更改而重新提供组件
useEffect在message更改触发时运行
返回第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>
  );

我对设置一无所知，因此可以简化并作一些假设。

useEffect处于无限循环

1 个答案: