Переписать функцию из метода жизненного цикла на хук

Question

У меня есть функция таймер, запускаю ее с помощью conponentDidMount, сейчас хочу переписать приложение на хуки, но проблема с сетСтейтом, не понимаю, как переписать этот кусочек с помощью хука useState

  componentDidMount = () => {
    /* eslint-disable */
    this.countTime = setInterval(() => {
      this.state.taskData.forEach((elem) => {
        if (elem.timer) {
          const allTime = elem.min * 60 + elem.sec;
          const leftTime = allTime - 1;
          if (elem.min <= 0 && elem.sec <= 0) return elem;
          elem.min = Math.floor(leftTime / 60);
          elem.sec = leftTime % 60;
          this.setState({
            min: elem.min,
            sec: elem.sec,
          });
        }
        return elem;
      });
    }, 1000);
    /* eslint-enable */
  };

  componentWillUnmount() {
    clearInterval(this.countTime);
  }

Answer 1

const App = () => {
    
    const [taskData, setTaskData] = useState(initState) //initState - ваше состояние инициализации
    
    useEffect(() => {
        let countTime = setInterval(() => {
            taskData.forEach((elem) => {
                if (elem.timer) {
                    const allTime = elem.min * 60 + elem.sec;
                    const leftTime = allTime - 1;
                    if (elem.min <= 0 && elem.sec <= 0) return elem;
                    elem.min = Math.floor(leftTime / 60);
                    elem.sec = leftTime % 60;
                    setTaskData((prevState) => ({
                        ...prevState,
                        min: elem.min,
                        sec: elem.sec
                    }));
                }
            });
        }, 1000)

        let clearCountTime = () => {
            clearInterval(countTime)
        }

        return clearCountTime
    })
    
    return (
    <div>какой-то jsx</div>
    )
}

Совсем примитивный пример

const SomeTimer = () => {
  const [count, setCount] = useState(1);

  useEffect(() => {
    //тело коллбека, вызывается при монтировании компонета.
    //создаем таймер.
    let countTime = setInterval(() => {
      setCount((prevState) => prevState + 1); //принимаем предыдущее значение состояния, изменяем, и устанавливаем.
    }, 1000);
    
    //создаем ф-ю очистки таймера
    let clearCountTime = () => {
      clearInterval(countTime);
    };
    
    //возвращаем из коллбека ф-ю очистки таймера, которая будет вызвана при размонтировании компонента.
    return clearCountTime;
  }, []);

  return (
    <div className="App">
      <h1>{count}</h1>
    </div>
  );
};

БЛОГ НА HUSL

Переписать функцию из метода жизненного цикла на хук

Ответы (1 шт):