Блог

Главная - Вопросы по программированию - введите для useRef, если используется с setInterval, react-typescript

введите для useRef, если используется с setInterval, react-typescript

#reactjs #typescript #animation #settimeout #use-ref

#reactjs #typescript #Анимация #next.js #settimeout

Вопрос:

Я делаю простую анимацию в next.js приложение.

 let flipInterval = useRef();



const startAnimation = () => {
    flipInterval.current = setInterval(() => {
      setIsFlipping((prevFlipping) => !prevFlipping);
    }, 10000);
  };

потому flipInterval.current что я получаю «Тип ‘Тайм-аут’ не может быть присвоен типу’неопределенный'». Итак, я проверил, как использовать тип тайм-аута, я вижу, что люди используют, но это не работает.

  let flipInterval = useRef<typeof window.settimeout>();

Я также передал number useRef<number>() на этот раз я получаю сообщение «Тип ‘Timeout’ не может быть присвоен типу ‘number'»

это тоже не сработало

   let flipInterval = useRef<typeof window.setInterval>();

Комментарии:

1. setInterval возвращает идентификатор для очистки таймера. Вы не должны хранить это в ссылке.

2. Неясно, чего вы хотите достичь. Если вы просто хотите очистить интервал при удалении компонента, то вам следует использовать useEffect() , который возвращает функцию очистки.

Ответ №1:

  const intervalRef: { current: NodeJS.Timeout | null } = useRef(null);


const startAnimation = () => {
   const id = setInterval(() => {
       setIsFlipping((prevFlipping) => !prevFlipping);
   }, 10000);
      intervalRef.current = id;
 };

  const clear = () => {
    clearInterval(intervalRef.current as NodeJS.Timeout);
  };

Ответ №2:

вам нужно передать правильный тип возвращаемого значения setInterval . для этого используйте ReturnType :

 const flipInterval = useRef<ReturnType<typeof setInterval>>(null)

Ответ №3:

Как я использую
* Предпочтительно установить начальное значение useRef . Вот почему null .

   const timeout = useRef<NodeJS.Timeout | null>(null);

  timeout.current = setTimeout(() => someAction()), 500);

  useEffect(() => {
    return () => clearTimeout(timeout.current as NodeJS.Timeout);
  }, []);

Ответ №4:

Если вы отключаетесь и вам нужно очистить тайм-аут null , необходимо обработать

Публикация, поскольку это может помочь другим из-за названия вопроса.

 const flipInterval:{current: NodeJS.Timeout | null} = useRef(null)

const startAnimation = () => {
  flipInterval.current amp;amp; clearTimeout(scrollTimeout.current);
        
  flipInterval.current = setInterval(() => {
    setIsFlipping((prevFlipping) => !prevFlipping)
  }, 10000)
}

Ответ №5:

 let flipInterval = useRef<number | null>(null);
const startAnimation = () => {
  flipInterval.current = window.setInterval(() => {
    setIsFlipping((prevFlipping) => !prevFlipping);
  }, 10000);
};

/* way of clear interval */
window.clearInterval(flipInterval.current || 0);

Ответ №6:

Вам нужно использовать NodeJS.Timeout type:

 let flipInterval = useRef<NodeJS.Timeout>()

const startAnimation = () => {
  flipInterval.current = setInterval(() => {
    setIsFlipping((prevFlipping) => !prevFlipping)
  }, 10000)
}