Как остановить setInterval в react при переходе между страниц с использованием NavLink?

Question

[Дмитрий Воробьев]

Приложение react, на странице работает функция setInterval.

import React from "react";
import logo from "./logo/logo.svg";
import style from "./StartPage.module.css";
import Cell from "./Cell";
import { NavLink } from "react-router-dom";

export const change = (arr) => {
  let i = -1;
  setInterval(function () {
    document.querySelector("i").className =
      arr[(i = ++i == arr.length ? 0 : i)];
  }, 1000);
};

const StartPage = () => {
  const arrD = [style.indicator, style.indicatorleft];
  change(arrD);
  return (
    <div className={style.grid}>
      <img src={logo} alt="bugaga"></img>

      <div className={style.radiobutton}>
        <NavLink
          onClick={() => {
            clearInterval(change);
          }}
          to="/radio">
          RadioButton
        </NavLink>
        <div className={style.list}>
          <div className={style.cell}>
            <div className={style.togle}>
              <i className={style.indicatorleft}></i>
            </div>
          </div>
          <Cell />
          <Cell />
          <Cell />
          <Cell />
          <Cell />
          <Cell />
          <Cell />
          <Cell />
        </div>
      </div>
      <div className={style.radio}>
        <NavLink to="/button">Button</NavLink>
        <div className={style.list}></div>
      </div>
    </div>
  );
};

export default StartPage;

Но при переходе на другую страницу через NavLink

<div className={style.radiobutton}>
        <NavLink
          onClick={() => {
            clearInterval(change);
          }}
          to="/radio">
          RadioButton
        </NavLink>

Выдает ошибку.
Подскажите как ее исправить или другой правильный способ остановки setInterval при срабатывании NavLink.
Если нужен код других компонент, напишите

Answer 1

[Kentavr16]

document.querySelector("i").className =
      arr[(i = ++i == arr.length ? 0 : i)];

ошибка возникает потому что вы пытаетесь задать идентификатор className как массив.
правильная запись - className = "myClass" или что-то подобное. Что вы хотели бы сделать с помощью этого кода? просто отключить таймер?

Comments

[Дмитрий Воробьев]

Я немного пошел дальше и код изменился, пробую решить проблему с помощью хука useEffect , код предоставляю ниже

import React, { useEffect } from "react";
import logo from "./logo/logo.svg";
import style from "./StartPage.module.css";
import Cell from "./Cell";
import { NavLink } from "react-router-dom";

export const change = (arr) => {
  let i = -1;
  setInterval(() => {
    document.querySelector("i").className =
      arr[(i = ++i == arr.length ? 0 : i)];
  }, 1000);
};

const StartPage = () => {
  const arrD = [style.indicator, style.indicatorleft];
  useEffect(() => {
    let timerID = change(arrD);
    return () => clearInterval(timerID);
  });

  return (
    <div className={style.grid}>
      <img src={logo} alt="bugaga"></img>

      <div className={style.radiobutton}>
        <NavLink to="/radio">RadioButton</NavLink>
        <div className={style.list}>
          <div className={style.cell}>
            <div className={style.togle}>
              <i className={style.indicatorleft}></i>
            </div>
          </div>

          <Cell />
          <Cell />
          <Cell />
          <Cell />
          <Cell />
          <Cell />
          <Cell />
          <Cell />
        </div>
      </div>
      <div className={style.radio}>
        <NavLink to="/button">Button</NavLink>
        <div className={style.list}></div>
      </div>
    </div>
  );
};

export default StartPage;

Это полный код файла, здесь у меня есть компонент StartPage в котором я вызываю таймер change, он каждую секунду меняет класс элемента, перебирает массив из названий элементов

const arrD = [style.indicator, style.indicatorleft];

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


Все работает, но при переходе на другую страницу, компонент, таймер не останавливается и выбивает ошибку не могу найти с селектором i . Как я понимаю, не может найти так-как эта компонента уже размонтирована из DOM, но почему он его ищет? Ведь должен был сработать clearInterval(timerID) и таймер остановится, в консоле видно что функция таймера продолжает работать