UseEffect 中的 setInterval 被调用 2/4 次

Question

您好，只想点击 useEffect 一次，但它被调用了 2-3 次，我尝试将函数包装在另一个函数中，但代码开始停止，你们能帮忙

需要调用successHandler，但是它在n over的时候被调用了

  const { successHandler } = props; 
  const [completed, setCompleted] = React.useState(10); 
  const fileType = getFileType(props.fileName); 

  React.useEffect(() => { 
         function progress() { 
            setCompleted(prevCompleted => { 
               if (prevCompleted >= 100) { 
                   successHandler(); 
                   return 100; 
               } 
              return prevCompleted + 10; }); 
         } 
         const timer = setInterval(progress, 500); 
 
         return () => { clearInterval(timer); }; 
      }, [successHandler]); 

Answer 1

如果useEffect 被多次调用，则意味着其依赖项中的某些内容发生了变化。在您的情况下，successHandler 发生了变化。看看它来自哪里，也许你需要使用useCallback 来确保它在重新渲染时不会改变。

例如，这将在每次重新渲染时重新运行 useEffect，因为 f 每次都会是一个新函数：

const f = () => {};
useEffect(() => { f(); }, [f]);

虽然这只会运行一次 useEffect，但因为 useCallback 会记住该函数，而 f 在每次重新渲染时都不会改变：

const f = useCallback(() => {}, []);
useEffect(() => { f(); }, [f]);

稍后编辑 - 我误解了这个问题。尝试像这样重写它：

const { successHandler } = props;
const [completed, setCompleted] = React.useState(10);
const fileType = getFileType(props.fileName);

React.useEffect(() => {
  function progress() {
    setCompleted(prevCompleted => Math.max(100, prevCompleted + 10));
  }
  const timer = setInterval(progress, 500);
  return () => {
    clearInterval(timer);
  };
}, []);

React.useEffect(() => {
  if (completed === 100) {
    successHandler();
  }
}, [completed, successHandler]);

这种方式successHandler应该只在完成变为100时调用一次（假设successHandler不会改变）。

你可能也想停止进度为 100 的时间，所以你可以这样做：

const { successHandler } = props;
const [completed, setCompleted] = React.useState(10);
const fileType = getFileType(props.fileName);
const timer = React.useRef(null);

const stopTimer = React.useCallback(() => {
  if (timer.current) {
    clearInterval(timer.current);
    timer.current = null;
  }
}, []);

React.useEffect(() => {
  function progress() {
    setCompleted(prevCompleted => Math.max(100, prevCompleted + 10));
  }
  timer.current = setInterval(progress, 500);
  return stopTimer;
}, [stopTimer]);

React.useEffect(() => {
  if (completed === 100) {
    stopTimer();
    successHandler();
  }
}, [completed, stopTimer, successHandler]);