如何在函数组件中保留对计时器的引用

Question

React 具有

useRef

，它允许我保留对对象的引用。我正在尝试使用计时器开始重复调用 api。当用户点击停止时，我想停止重复调用，或者“取消订阅”。

subscription = timer(0,1000).subscribe(n => dispatch(fetchData()));

subscription.unsubscribe();

这些函数来自 rxjs 库

有没有一种方法可以在我的

function onSubmit()

中使用 React 的

useRef

函数来维护对订阅的引用，以便我可以取消订阅？

function onSubmit(){ 
    /// if 
     subscription = timer(0,1000).subscribe(n => dispatch(fetchData()));
    ///else 
     subscription.unsubscribe();

  } 
    

Answer 1

您只能在组件或钩子中使用

useRef()

。您不能仅在独立的 JS 函数中使用它。

假设您的

onSubmit

是在组件内部定义的，那么您可以执行以下操作：

import {useRef} from 'react';

// ...

export const MyComponent = (props) => {

  const subscription = useRef(null);

  function onSubmit(){ 
    if (subscription.current === null) {
     subscription.current = timer(0,1000).subscribe(n => dispatch(fetchData()));
    } else  {
     subscription.current.unsubscribe();
     subscription.current = null;
    }
  }

  // ...
}

  }