0

Задачка поначалу показалась весьма простой, но когда начал работать с таймером - что-то пошло не так. К примеру:

const [number, setNumber] = useState(4);

useEffect(() => {
    setInterval(out, 1500);
}, []);

const out = () => {
    console.log(number);
};

В общем нужно, чтобы при смене number в консоль выводилось новое значение, а то у меня постоянно выводится 4. Пробовал делать clearInterval и создавать новый таймер при изменении того же number, но, в итоге, у меня существовало 2 таймера. Подскажите как оптимально решить задачку.

4
  • А где вы setNumber вызываете?
    – Alexey Ten
    15 июл 2021 в 5:45
  • Я его выставил в useEffect, как в коде выше. Иначе при перерендере компонента будет появляться по таймеру... 15 июл 2021 в 5:46
  • Показывайте весь код. Пока совершенно непонятно что у вас происходит и что нужно получить
    – Alexey Ten
    15 июл 2021 в 5:55
  • Но это и есть весь код. Можно добавить input с кнопкой, клик по которой будет обновлять значение в стейте. Вот и всё. А задача следующая: вбить в поле цифру 5, нажать на кнопку (в скейте теперь 5, а не 4) и выводить в консоль 5. У меня выводится всё та же четвёрка, т.е. таймер не получает внешне значение, он как помнил 4, так до такого его и выводит. 15 июл 2021 в 6:13

1 ответ 1

1

Можно например так:

import React from "react";

const Timer = () => {
  const [number, setNumber] = React.useState(1);

  React.useEffect(() => {
    // таймер пересоздаётся каждый раз когда обновляется number
    const id = setInterval(() => setNumber(number + 1), 1000);
    return () => {
      clearInterval(id);
    };
  }, [number]);

  return <div>Number is {number}</div>;
};

export default Timer;

Но даже проще можно написать так:

import React from "react";

const Timer = () => {
  const [number, setNumber] = React.useState(1);

  React.useEffect(() => {
    setTimeout(() => setNumber(number + 1), 1000);
  }, [number]);

  return <div>Number is {number}</div>;
};

export default Timer;

Потому что в первом варианте из-за особенностей реакта каждый раз пересоздаётся таймер. С одним таймером не будет ре-рендерится обновлённое значение (если оно должно быть не только в консоли):

import React from "react";

const Timer = () => {
  const [number, setNumber] = React.useState(1);

  let n = 0;
  React.useEffect(() => {
    // таймер создаётся 1 раз
    const id = setInterval(() => {
      console.log(n++);
    }, 1000);

    return () => {
      clearInterval(id);
    };
  }, []);

  return (
    <>
      <div>Number is {number}</div>
      <div>n is {n}</div>
    </>
  );
};

export default Timer;

Последний вариант - это не Реакт стиль -> bad practice

1
  • 1
    Благодарю! Первый вариант мне подошёл. Так как я не раскрывал свою задачу полностью, то второй вариант создал у меня 2 таймера. Третью не тестировал, остановился на первой. Хорошо, что написали несколько решений, наверняка кому-нибудь они пригодятся. Хотя, честно скажу, я не догоняю как работает возврат функции остановки таймера, но именно этот вариант мне помог. Другие варианты остановки таймера мне не помогали. 15 июл 2021 в 11:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.