為什么我在 React 中的 clearInterval 不起作用？

Question

當我點擊更改代碼時，我只看到 consols.log。 我試圖理解它，但我找不到答案..

function App() {
  const [laps, setLaps] = useState(0);
  const [running, setRunning] = useState(false);
  const startTime = Date.now() - laps;

   useEffect(() => {
    function interval() {
      setInterval(() => {
        setLaps(Date.now() - startTime);
      }, 100);
    }

    if (!running) {
      clearInterval(interval);
      console.log('ok');
    } else {
      interval();
      console.log('no');
    }
    console.log(running);
  }, [running]);

  return (
    <div className="App">
        <label>Count: {laps}</label>
        <button onClick={() => setRunning(!running)}>{running ? 'stop' : 'start'}</button>
        <button>Clear</button>
    </div>
  );
}

在干凈的 JavaScript 中，這段代碼應該可以正常工作（當然沒有 JSX）？

Answer 1

clearInterval期望一個數字作為從setInterval返回的參數，但是您將interval函數作為參數提供給它。

如果running為 true，您可以改為只創建間隔，並從useEffect返回一個清理函數，該函數將在下次運行效果時運行。

 const { useState, useEffect } = React; function App() { const [laps, setLaps] = useState(0); const [running, setRunning] = useState(false); const startTime = Date.now() - laps; useEffect( () => { if (running) { const interval = setInterval(() => { setLaps(Date.now() - startTime); }, 100); return () => clearInterval(interval); } }, [running] ); return ( <div className="App"> <label>Count: {laps}</label> <button onClick={() => setRunning(!running)}> {running ? "stop" : "start"} </button> <button>Clear</button> </div> ); } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>