为什么 useEffect() Hook 重新渲染超过 10 次？答案

【问题标题】：Why is the useEffect() Hook re-rendering more than 10 times?为什么 useEffect() Hook 重新渲染超过 10 次？
【发布时间】：2020-07-16 13:29:46
【问题描述】：

看起来我的“EnterPin”函数一直在重新渲染。我只需要在 Authentication 为 true 时重新渲染一次。

当它更改为 /chat 时，它应该调用两个函数。当前的问题是它调用该函数十多次。我想问题可能是useeffect函数触发太频繁了？你怎么看？

所以想要的结果是，当 pin 正确时，它会变为“/chat”。在这里你可以看到 useEffect 函数：

useEffect(() => {
    if (isAuthenticated === true) {
      props.history.push("/chat");
    }
  }, [props.history, isAuthenticated]);

isAuthenticated 变量来自反应上下文，并由以下 reducer 更改：

import { CHATID_FETCH_SUCCESSFUL, NEW_CURRENT_NODE_CREATED } from "./authTypes";

export default (state, action) => {
  switch (action.type) {
    case CHATID_FETCH_SUCCESSFUL:
      return {
        isAuthenticated: true,
        chatId: action.payload,
      };
    // action 5: new current Node created
    case NEW_CURRENT_NODE_CREATED:
      return {
        ...state,
        currentNode: [...action.payload],
      };
    default:
      return state;
  }
};

每当它转到“/chat”端时，它应该调用以下两个函数，这两个函数目前调用了10次，但应该只调用一次：

let startEvent = fetchEventAnswerFromDialogflow(
        someParameters
      );
let frageEvent = fetchEventAnswerFromDialogflow(
        someParameters
      );

【问题讨论】：

从useEffect deps 中删除props.history（history 在每个history.push 之后更改）
你的意思是这样吗？ --> useEffect(() => { if (isAuthenticated === true) { props.history.push("/chat"); } }, [ isAuthenticated]); 好像这并没有解决问题

标签： reactjs render react-context react-dom

【解决方案1】：

Ciao，问题与 useEffect 的部门有关。您不需要添加 props.history 依赖项。如果你添加它，每次props.history 都会调用useEffect 来改变他的值（这就是你有这么多重新渲染的原因）。所以你的代码变成了：

useEffect(() => {
if (isAuthenticated === true && props.history.location.pathname !== "/chat") {
  props.history.push("/chat");
}
}, [isAuthenticated]);

【讨论】：

感谢 Giovanni，但它似乎无法停止多次调用“/chat”模块
好的，我更新了我的答案，在致电props.history.push("/chat"); 之前进行了检查。基本上我正在做的是检查当前历史位置是否是“/聊天”，在这种情况下，跳过历史推送。你怎么看？