javascript - rxfire 订阅未在 componentdidmount 中触发

Question

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

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

这段代码的问题是没有触发并且屏幕卡在加载组件上。如果我第二次加载屏幕就可以了。难道我做错了什么？我该如何解决

Answer 1

如果在您重新加载之前它无法工作，则可能存在基于何时items$发出categories$自己的值的时间问题。

结合这些 observables 的更安全的方法是使用combineLatest()RxJS 的特性。它接受一个可观察对象数组，并且在从每个可观察对象接收到值之前不会发出。

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

请记住combineLatest()，如果数组中的任何 observable 没有发出值，则combineLatest()永远不会发出值。