React. Работа с таймером

Question

Почему не работает код:

import React from "react";
import { useState, useEffect } from "react";

const Timer = ({ timeoutSec }) => {
  const [counter, setCounter] = useState(timeoutSec);

  useEffect(() => {
    const timer =
      counter > 0 && setInterval(() => setCounter(counter - 1), 1000);
    return () => clearInterval(timer);
  }, [counter]);

  return <div>timer: ${counter}</div>;
};

export default function App() {

  return (
    <div className="App">
      <h2>{Timer(60)}</h2>
    </div>
  );
}

Answer 1

Дело в том, что Вы используете синтаксис деструктурирующего присваивания, которое позволяет извлекать данные из массивов или объектов при помощи синтаксиса, подобного объявлению массива или литералов в объекте. Вот ваш код:

const Timer = ({ timeoutSec }) => { ... }

В приведенном коде из параметра переданного объекта в метод Timer извлекается поле timeoutSec. Это означает, что в переданном объекте в Timer - должно быть поле timeoutSec, иначе вы получите undefined. Решение проблемы простое, передать объект с таким параметром, либо изменить параметр метода.

Вызвать таймер вот так: Timer({ timeoutSec: 60 })
Вызвать таймер так: Timer(60), при этом изменить метод: const Timer = (timeoutSec) => { ... }

БЛОГ НА HUSL

React. Работа с таймером

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