Javascript 扩展React上下文会导致；惰性元素必须解析为类或函数；错误

使用React^16.13.1

我使用Firebase作为数据库，从任何组件访问Firebase的一个简单方法是使用React.createContext（）

现在，我可以从任何其他组件访问我的firebase功能，而无需通过“道具”

从'src/Firebase'导入{withFirebase}；
函数MyComponent（{firebase}）{
返回(
胡萨！
)
}
使用Firebase导出默认值（MyComponent）；//将firebase注入MyComponent

我的问题是，当我试图在Firebase/index.js中扩展我的withFirebase函数来做额外的工作时

import FirebaseContext, { withFirebase } from './context.js';
import Firebase from './firebase.js';
import React from 'react';

export default Firebase;

// Extend the withFirebase function
const firebaseCacheing = Component => ({firebase, ...props}) => {

  // Do some additional work here

  return (
    <Component {...props} firebase={firebase}/>
  );
};

const withCachedData = withFirebase(firebaseCacheing);

export {FirebaseContext, withFirebase, withCachedData};

导入FirebaseContext，{withFirebase}来自'/context.js'；
从“/Firebase.js”导入Firebase；
从“React”导入React；
导出默认Firebase；
//扩展withFirebase函数
const firebasecaching=Component=>（{firebase，…props}）=>{
//在这里做一些额外的工作
返回(
);
};
常量withCachedData=withFirebase（FirebaseCaching）；
导出{FirebaseContext，withFirebase，withCachedData}；

现在尝试使用任何MyComponent都会给我一个错误

import {withCachedData} from 'src/Firebase';

function MyComponent({firebase}){
  return (
    <div>Error ... ugh!</div>
  )
}

export default withCachedData(MyComponent); // inject the extended firebase service into MyComponent

从'src/Firebase'导入{withCachedData}；
函数MyComponent（{firebase}）{
返回(
错误…啊！
)
}
使用CachedData导出默认值（MyComponent）；//将扩展的firebase服务注入MyComponent

不走运。我得到一个对惰性元素的引用

react dom.development.js:17404未捕获错误：元素类型为 无效的收到解析为：[对象]的承诺。懒惰的 元素类型必须解析为类或函数

// Firebase/index.js

import FirebaseContext, { withFirebase } from './context.js';
import Firebase from './firebase.js';
import React from 'react';

export default Firebase;

export {FirebaseContext, withFirebase};

我的猜测是，由于没有立即解析（它需要提供程序），扩展withCachedData被认为是一个惰性组件。为什么会这样——当Firebase工作时——我有点难以理解

我也尝试过使用

组件和lazy（）函数，但到目前为止运气不太好

有什么想法吗

import FirebaseContext, { withFirebase } from './context.js';
import Firebase from './firebase.js';
import React from 'react';

export default Firebase;

// Extend the withFirebase function
const firebaseCacheing = Component => ({firebase, ...props}) => {

  // Do some additional work here

  return (
    <Component {...props} firebase={firebase}/>
  );
};

const withCachedData = withFirebase(firebaseCacheing);

export {FirebaseContext, withFirebase, withCachedData};

import {withCachedData} from 'src/Firebase';

function MyComponent({firebase}){
  return (
    <div>Error ... ugh!</div>
  )
}

export default withCachedData(MyComponent); // inject the extended firebase service into MyComponent