Question

我有四个屏幕A（主页），B，C，D

每个屏幕都有一个功能，当屏幕onStart或onResume由我通过react-redux实现时会触发。

countdownToFirstScreen = () => {
    this.timeOut = setTimeout(()=> {
      clearTimeout(this.timeOut); // clearTimeout before navigate next screen
      this.props.leaveTheScreenTime(); // change for some redux store boolean
      this.props.navigation.navigate('A');
    }, 9000);    
  }

如果用户在倒数结束之前单击<Button />，我也会设置clearTimeout。

<Button 
  onPress={() => { 
    clearTimeout(this.timeOut);
    this.props.navigation.navigate('nextScreen');
  }
/>

当我在A，B和C之间导航时，它正在工作。

当我尝试从C导航到D时，会发生我的问题。

即使我单击C屏幕上的countdownToFirstScreen，也会触发

C屏幕功能<Button />。

有人知道我的setTimeout和clearTimeout发生了什么事吗？

Answer 1

似乎您可能会遇到范围界定问题，因为this回调中的setTimeout可能具有与this.timeOut不同的上下文，因此没有清除计时器。理想情况下，您需要一种设置，可以在每个屏幕上的某个全局组件（如AppComponent）中跟踪计时器，并且设置如下：

componentWillMount () {
   // Add your listener
   DeviceEventEmitter.addListener('timer', this.clearTimer.bind(this));
}

componentDidMount () {
  startTimer()
}

componentWillUnMount () {
  clearTimer()
}

startTimer () {
 this.timer = this.setTimeout(() => {
   this.props.navigation.navigate('A');
 },9000);

clearTimer () {
 // Handle an undefined timer rather than null
 this.timer !== undefined ? this.clearTimeout(this.timer) : null;
}

Answer 2

使用React-Hooks 和功能组件 ...事情要容易得多...

带有 empty-deps [] 的效果模拟 componentDidMount，其 cleanUp-callback 模拟 componentWillUnmount

  const timerRef = useRef(null);

  useEffect(() => {
    timerRef.current = setTimeout(() => {
      /** Your logic goes here */
    }, 9000);

    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
    };
  }, []);

clearTimeout在React Native中不起作用

2 个答案: