Мне нужно clearTimeout в функции реакции? - PullRequest
Новая
       0

Мне нужно clearTimeout в функции реакции?

2 голосов
/ 25 мая 2020

Я использую setTimout () в функции и не вызываю эту функцию в useEffect (). Мне все еще нужно найти способ сбросить тайм-аут? 

const RandomComponent = () =>{

  const [clicked, setClicked] = useState(false);

  const aFunction = () => {
    setTimeout(()=>{
      setClicked(true);
    },1000);
  }

  return (
    <div>
      <button onClick={aFunction}>Click me!</button>
    </div>  
  )

}

Что-то вроде кода выше, в этой ситуации мне нужно очистить тайм-аут? спасибо

* Обновленный вопрос: 

const RandomComponent = () =>{

  const [clicked, setClicked] = useState(false);

  const aFunction = (evt) => {
    return setTimeout(()=>{
      setClicked(true);
    },30000);
  }

  useEffect(()=>{
    return ()=>{
      // how to clear setTimeout in 'aFunction' when I unmount this component?
    }
  });

  return (
    <div>
      <button onClick={aFunction}>Click me!</button>
    </div>  
  )

}

1 Ответ

1 голос
/ 25 мая 2020

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

Поскольку вы запускаете таймер нажатием кнопки, если обратный вызов таймера использует информация о состоянии, когда он запускается (тот, который в вопросе, нет), информация о состоянии, которую он закрывает, может быть устаревшей, но он может получить бесплатную sh информацию о состоянии через функцию установки, если она ей нужна. Но если таймер может сработать после размонтирования компонента, использование такого сеттера вызовет ошибку об обновлении состояния на размонтированном компоненте. Трудно дать вам общее решение для этого, поскольку общее решение обычно не так хорошо, как решение, определяющее c то, что вы делаете в обратном вызове таймера.

В комментарии, который вы спросили:

, если, когда придет время, мне нужно очистить / очистить мой setTimeout в функции, когда я размонтирую компонент, как мне это сделать ? Потому что, если я вызываю setTimeout в useEffect, я могу просто поместить setTimeout в переменную и clearTimeout (theSetTimoutVariable) внутри функции возврата в useeffect, но как мне это сделать в функции, которая будет вызываться кнопкой onClick с аргументом события ?

Дело в том, что я не знаю «правильный» способ React, чтобы сделать это, и мне бы хотелось.

Я знаю a способ сделать это, то есть использовать useEffect с пустым массивом зависимостей и данными экземпляра без состояния, например: 

// A utility function that cancels a timer callback if necessary and
// returns a 0 you can assign to the timer handler variable
function cancelTimer(handle) {
    if (handle) {
        clearTimer(handle);
    }
    return 0;
}

const Example = () => {
    // Non-state instance data
    const {current: instance} = useRef({});

    // Cleanup on dismount
    useEffect(() => {
        // Mounting
        // ...

        return () => {
            // Dismounting

            // If we have an outstanding timer, cancel it
            instance.timer = cancelTimer(instance.timer);
        };
    }, []); // <=== Empty array means the callback is only called on mount,
            //      and the one it returns is only called on dismount

    const onButtonClick = () => {
        instance.timer = cancelTimer(instance.timer);
        instance.timer setTimeout(() => {
            // ...
        }, 1000);
    };

    return (/*...*/);
};
...