时间戳

首页 > 解决方案 > Rxjs 方法中的 unsubscribe() 对 React js 不起作用

reactjs - Rxjs 方法中的 unsubscribe() 对 React js 不起作用

问题描述

在文件 timer.js 我导出这个变量 initTimer （创建流）

   export const initTimer=new Observable((observer)=>{
    interval(1000)
    .subscribe(val=>{
      observer.next(val)})
    })

应用内

  const [sec, setSec] = useState(0);
  const [status, setStatus] = useState("start" | "stop" | "wait");
 
  const subscribe=()=>{
     return initTimer.subscribe({next(x){
      setSec(x=>x+1000)
  }})}
  useEffect(() => {
    if(status==="start"){
      subscribe()
    }
    if(status==="stop"){
    subscribe().unsubscribe()
    }
  
  }, [status]);
 
  const start = React.useCallback(() => {
    setStatus("start");
  }, []);
 
  const stop = React.useCallback(() => {
    setStatus("stop");
    setSec(0);
    
  }, []);
 
 
 
  return (
    <div>
      <span> {new Date(sec).toISOString().slice(11, 19)}</span>
      <button className="start-button" onClick={start}>
        Start
      </button>
      <button className="stop-button" onClick={stop}>
        Stop
      </button>
    </div>
  );
}

当触发“开始”时，我订阅计时器，调用方法“下一步”并将结果结果添加到状态。但是当“停止”条件被触发时，我必须取消订阅并且计时器必须停止计数，但是当我取消订阅时，计时器被重置并开始倒计时。如何停止计时器？

标签： reactjsrxjs

解决方案

您需要存储您的订阅，以便以后可以使用它来取消订阅。

您可以使用以下方法执行此操作userRef：

const [sec, setSec] = useState(0);
const [status, setStatus] = useState("wait");
const sub = useRef();

useEffect(() => {
  // Subscribe and store subscription
  if (status === "start") {
    sub.current = initTimer.subscribe({
      next(x) {
        setSec(x => x + 1000);
      }
    });
  }

  // Unsubscribe
  if (status === "stop") {
    if (sub.current) {
      sub.current.unsubscribe();
    }
  }

  // Return cleanup function to unsubscribe when component unmounts
  return () => {
    if (sub.current) {
      sub.current.unsubscribe();
    }
  }
}, [status]);

const start = React.useCallback(() => {
  setStatus("start");
}, []);

const stop = React.useCallback(() => {
  setStatus("stop");
  setSec(0);
}, []);

推荐阅读