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

发布于01月09日

Reaction有useRef，它允许我保持对对象的引用.我正在try 使用计时器启动对API的重复调用.当用户点击停止时，我想停止重复的呼叫，或"取消订阅".

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

这些函数来自rxjs library

有没有办法在我的function onSubmit()(它在一个函数组件中)中使用Reaction的useRef函数来维护对订阅的引用，以便我可以取消订阅？

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

  }

推荐答案

只能在组件或挂钩中使用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;
    }
  }

  // ...
};