Почему мой clearInterval в React не работает? - PullRequest
Новая
       22

Почему мой clearInterval в React не работает?

1 голос
/ 04 апреля 2019

когда я нажимаю, чтобы изменить код, я вижу inly 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)?

1 Ответ

1 голос
/ 04 апреля 2019

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>
...