Reactjs 为什么React UseEffect挂钩在页面重新加载时运行

发布于10月02日

我有一个带有依赖数组的UseEffect挂钩.

问题是，当我重新加载页面时，里面的代码运行every次.

我已经打印了这些值，所以它们不应该改变.

以下是其中的诱因:

  useEffect(
    function () {
      console.log('This prints on page load every time');
      // Check if the user is upvoting
      if (didUserUpvote) {
        console.log('here');
        incrementUserUpvotes(answer.uidCreated);
        incrementAnswerUpvotes(answer.answerID);
        appendToArrInDoc('answers', answer.answerID, 'upvotedBy', user.uid);
        console.log('done');
      }
    },
    [didUserUpvote, answer.uidCreated, answer.answerID, user.uid]
  );

推荐答案

每次使用重新加载页面时都会运行useEffect，因为变量是在初始呈现时初始化的，这会导致触发useEffect.

解决此问题的最好方法是使用useRef布尔值(为真时为init).如果为True，则将useRef设置为False.如果为False，则运行您在useEffect中拥有的代码.

以下是我将如何修改您的代码:


const init = useRef(true)
  useEffect(
    function () {
if(init.current){
init.current= false
}else{
      console.log('This prints on page load every time');
      // Check if the user is upvoting
      if (didUserUpvote) {
        console.log('here');
        incrementUserUpvotes(answer.uidCreated);
        incrementAnswerUpvotes(answer.answerID);
        appendToArrInDoc('answers', answer.answerID, 'upvotedBy', user.uid);
        console.log('done');
      }
}
    },
    [didUserUpvote, answer.uidCreated, answer.answerID, user.uid]
  );```