React Native setTimeout - 如何清除超时

Question

我在 useEffect 之外有一个 setTimeout 调用，如何在屏幕卸载时清除超时？

例如，我有一个功能组件，里面有这个...

...

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)

我尝试了其他一些奇怪的想法，但没有任何效果，我想不通这个。

想法？

Answer 1

一整天都在研究这个问题 - 在 Whosebug 上写一个问题并在两分钟内解决。疯了！

这个问题的答案是将一个变量设置为false，然后在取回数据时更改该变量。然后有一个单独的 useEffect() 函数只处理这个。当变量改变时它运行。如果变量为 true - 设置超时和 useEffect 函数 returns 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)
  })
}

React Native setTimeout - 如何清除超时

React Native setTimeout - How to clearTimeout

settimeout

cleartimeout

react-native