useEffect 中的推送历史记录导致其他路由中的重定向答案

【问题标题】：push history in useEffect causes redirect in other routesuseEffect 中的推送历史记录导致其他路由中的重定向
【发布时间】：2020-03-14 08:49:48
【问题描述】：

我的页面中有这个钩子：

useEffect(() => {
    if (props.messages.msg !== "No token,authorization denied") {
      props.clearMsg();
      setInterval(() => {
        props.history.push("/");
      }, 2500);
    }
  }, [props.messages.msg, props.history]);

基本上当我从 redux 收到服务器的响应时，我会在 2.5 秒后重定向到我的根页面，它工作得很好，问题是当我在我的根页面并且我尝试去不同的路线时，我被重定向回根，好像 useEffect 再次运行，我试图控制台记录它和它似乎没有再次运行，所以我不知道为什么会发生这种情况，有什么想法吗？

【问题讨论】：

标签： reactjs react-router react-hooks use-effect

【解决方案1】：

我相信你的意思是setTimeout，它只会调用一次回调：

  useEffect(() => {
    if (props.messages.msg !== "No token,authorization denied") {
      props.clearMsg();
      setTimeout(() => {
        props.history.push("/");
      }, 2500);
    }
  }, [props.messages.msg, props.history]);

【讨论】：

【解决方案2】：

setInterval 将每 2.5 秒运行一次，这不是多次运行的效果。卸载组件时使用clearInterval 以防止它再次运行。这是clearInterval 上的文档。

【讨论】：

是的，我想说setTimeout 是这里更好的解决方案。