Question

我正在将一个新的主题从内部NPM包导入到Next.js应用程序中。

内部NPM软件包

import { Subject } from 'rxjs';

export const errorSubject = new Subject<{}>();

Next.js应用

import { errorSubject } from '@my-package'

// Inside component's render
render() {
  errorSubject.subscribe({
    next: v => console.log(v),
  });
}

每次Next.js热重载时，都会创建一个新的订阅。如果我重新加载页面，则仅剩1个订阅。

这引起了问题，因为运行了多个回调。

https://www.youtube.com/watch?v=cqy3RPQocRw

Answer 1

保存对订阅的引用，以便每次卸载组件时都摆脱它。

private _subscription;


render() {
  this._subscription = errorSubject.subscribe({
    next: v => console.log(v),
  });
}

componentWillUnmount() {
  this._subscription.unsubscribe();
}

在页面热模块替换期间创建新的RxJS订阅

1 个答案: