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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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