rxfire 订阅未在 componentdidmount 中触发

问题描述

我正在使用 rxfire 在 componentdidmount 中合并来自 firestore 的数据：

store$.pipe(
      withLatestFrom(items$),map(([store,items]) => ({ items,...store })),).pipe(   
      withLatestFrom(categories$),categories]) => ({ categories,).subscribe(store => {      
      this.setState({ store: store,isLoading: false });
    })   

这段代码的问题不是触发，屏幕卡在加载组件上。如果我第二次加载屏幕，它就会工作。难道我做错了什么？我该如何解决它

解决方法

如果它在您重新加载之前不起作用，则可能存在基于 items$ 和 categories$ 何时发出自己的值的计时问题。

将这些 observable 结合起来的一种更安全的方法是使用 RxJS 的 combineLatest() 特性。它接受一个 observable 数组，并且在收到 每个 observable 的值之前不会发出。

combineLatest([store$,items$,categories$]).pipe(
  map(([store,items,categories])=>({...store,...items,...categories})),tap(store=>this.setState({ store,isLoading: false })
).subscribe();

记住 combineLatest()，如果数组内的任何 observable 不发出值，那么 combineLatest() 将永远不会发出值。