Reactjs 异步定义HOC

让我来定义我的用例，这样更容易解释

我使用的是这个包，它基本上是通过

localfough.newObservable（）

创建一个Observable，每当localfough中的项目发生更改时都会触发

然后，我有一个HOC，

mapPropsStream

，它获取这个可观察值并将值传递到包装的组件中

  const withLocalForage = mapPropsStream((props$) => {
    return props$.pipe(
      combineLatest(localForage.newObservable(), (props, lf) => {
        return { ...props, lf };
      })
    );
  });

  export default withLocalForage

所以在我的React组件中，我

import './withLocalForage';

@withLocalForage
class MyComp extends React.Component {
  render() {
    return <div>{JSON.stringify(this.props.lf)}</div>
  }
}

import'/withlocalfough'；
@用本地饲料
类MyComp扩展了React.Component{
render（）{
返回{JSON.stringify（this.props.lf）}
}
}

这将起作用，但有一个问题除外：

当前LocalFound可观察对象只能在LocalFound.ready（）之后创建。

（LocalFound可观察对象的文档）

唯一的问题是，在应用程序加载时，

localfow.newObservable（）

没有定义；仅当我执行

localfough.ready（），然后（（）=>{/*使用localfough.newObservable（）*/}）时才定义它

我希望这篇文章的标题现在更清楚了：在我的例子中，我如何定义
与localfough
HOC异步，这样它只能在
localfough.ready（）
之后定义？
对于
newObservable
来说，在内部链接
localfough.ready（）
是合理的。由于情况并非如此，因此可能应手动执行此操作：

  const localforage$ = from(localForage.ready()).pipe(
    switchMap(() => localForage.newObservable())
  );

  const withLocalForage = mapPropsStream((props$) => {
    return props$.pipe(
      combineLatest(localforage$, (props, lf) => {
        return { ...props, lf };
      })
    );
  });

如果你正在使用这个库，考虑打开一个问题。强制开发人员链接
ready
和
newObservable
是没有意义的，这应该由库来完成。这种方法很常见，例如在猫鼬中。