Реагировать на собственный setTimeout - Как очистить TimeTimeout - PullRequest
Новая
       50

Реагировать на собственный setTimeout - Как очистить TimeTimeout

0 голосов
/ 21 сентября 2019

У меня есть вызов setTimeout вне useEffect, как я могу очиститьTimeout, когда экран отключается?

Например, у меня есть функциональный компонент с этим в нем ... 

...

useEffect(() => {
  return () => clearTimeout(myTimeout)
}, [])

_getData = () => {
  fetch()
  .then(data => {
    let myTimeout = setTimeout(() => setSomething(!something), 5000)
  })
}

Итак, где-то позже в коде я вызываю _getData () - я не хочу, чтобы это запускалось с useEffect при первой загрузке страницы, только при выполнении определенных действий.После того, как я получу данные, я установлю таймаут.Но useEffect не знает об этом тайм-ауте.

Я попытался установить время ожидания следующим образом ... 

_getData... 
  setTimeoutVar(setTimeout(() => setSomething(!something), 5000))

useEffect...
 return () => clearTimeout(setTimeoutVar)

Я попробовал несколько других странных идей, ничего не работает, я не могу понять это.

Мысли?

1 Ответ

0 голосов
/ 21 сентября 2019

Весь день работаем над этим - напиши вопрос о stackoverflow и разберись в нем за две минуты.Сумасшедший!

Ответ на этот вопрос заключается в том, чтобы установить для переменной значение false, а затем изменить переменную при получении данных обратно.Затем создайте отдельную функцию useEffect (), которая занимается только этим.Когда переменная меняется, она запускается.Если переменная имеет значение true - устанавливает время ожидания, а функция useEffect возвращает clearTimeout ... 

const [refresh, setRefresh] = useState(false)

useEffect(() => {
  let timeoutVariable

  if(refresh){
    timeoutVariable = setTimeout(() => setRefresh(false), 5000)
  }

  return () => clearTimeout(timeoutVariable)

}, [refresh]) 

_getData = () => {
  fetch()
  .then(data => {
    setRefresh(true)
  })
}
...