javascript - clearInterval 在 React 功能组件中不起作用

Question

我在 React 功能组件中使用 setInterval 和 clearInterval。我正在增加 setInterval 内的计数，并希望在达到特定值后clearInterval。但它没有清除，不确定我做错了什么。

const { useState, useEffect } = React;

/*export default*/ function App() {
  const [chartsCount, setChartsCount] = useState(1);

  useEffect(() => {
    const chartsCountId = setInterval(() => {
      setChartsCount((count) => {
        console.log('set chart count function is running ', { chartsCount });
        if (chartsCount >= 3/*16*/) {
          console.log('We have reached the limit');
          clearInterval(chartsCountId);
        }
        return count + 1;
      });
    }, 1000);
    return () => {
      clearInterval(chartsCountId);
    };
  }, [chartsCount]);
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Answer 1

您应该处理 setState 之外的逻辑，因为您将 count 包含在效果的 deps 中，因此不需要在回调中读取新状态:

const { useState, useEffect } = React;

/*export default*/ function App() {
  const [chartsCount, setChartsCount] = useState(1);

  
  useEffect(() => {
    const chartsCountId = setInterval(() => {
      if (chartsCount >= 3 /*16*/ ) { // ***
        console.log('We have reached the limit');
        clearInterval(chartsCountId);
      } else {
        setChartsCount(c => c + 1);
        console.log("Current count: ", chartsCount )
      }
    }, 1000);
    return () => {
      clearInterval(chartsCountId);
    };
  }, [chartsCount]); // ***
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

或者，如果您只想对代码进行简单快速的修复:

 setChartsCount((count) => {
        console.log('set chart count function is running ', { chartsCount });
        if (chartsCount >= 3/*16*/) {
          console.log('We have reached the limit');
          clearInterval(chartsCountId);
          return count
        }
         return count + 1;
      });

基本上，如果达到限制，您将设置相同的计数，这将防止效果再次运行。