@n1ksON
Интерн

Как сделать повторяющуюся анимацию?

Нужно сделать повторяющуюся с определённым промежутком смену стиля в блоке.
У меня есть массив с объектами в которых прописан стиль. Нужно в блоке менять стиль с определённой периодичностью.

Вот что у меня получилось:
import React, { useEffect, useState } from "react";

const Result = ({ properties, time }) => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    let timerId = setTimeout(
      () => (count < 2 ? setCount((prev) => ++prev) : setCount(0)), // count всегда меньше 3х
      `${time}000`
    );
  }, [count, time]);
  let styles = [];
  for (let i = 0; i < properties.length; i++) {
    styles.push({
      color: `${properties[i].color}`,
    });
  }
  return (
    <div>
      <div
        className="banner"
        style={styles[count]}
      />
    </div>
  );
};

export default Result;


Код работает, пока не изменятся properties или time. Тогда, как я понимаю, создаётся новый таймер и всё ломается.
Если я правильно понимаю, после изменения properties или time, нужно сбросить выполняющийся таймер, но как мне это сделать? Создать новый useEffect? Но как получить доступ к интервалу из уже имеющегося useEffect?
  • Вопрос задан
  • 46 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Но как получить доступ к интервалу из уже имеющегося useEffect?

очистка эффекта
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы