Javascript React.js上下文API:元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）

考虑以下场景：

import React，{Component}来自'React'；
从“../Services/LocaleService.js”导入LocaleService；
const defaultStore={
加载：false，
地区：[]
};
const LocalesContext=React.createContext（defaultStore）；
类LocaleProvider扩展组件
{
state=defaultStore；
加载（）{
const service=new localeseservice（），this=this；
service.fetch（）.then（函数（区域设置）{
setState（{locales:locales，loaded:true}）；
});
}
数据（）{
返回此.state；
}
componentDidMount（）{
这个.load（）；
}
render（）{
返回(
{this.props.children}
);
}
}
导出默认LocaleProvider；

import React，{Component}来自'React'；
从“/Sidebar.js”导入侧边栏；
从“/Topbar.js”导入Topbar；
从“/Content.js”导入内容；
从“/Providers/LocalesProvider.js”导入LocalesProvider；
类应用程序扩展组件
{
状态={
准备好了吗
}
render（）{
if（this.state.ready）{
返回(
{data=>
(
)
}
);
}否则{
返回（'加载…'）；
}
}
}
导出默认应用程序；

import React，{Component}来自'React'；
从“/Providers/LocalesProvider.js”导入LocalesProvider；
从“react router dom”导入{NavLink，HashRouter}；
类边栏扩展组件
{
建造师（道具）{
超级（道具）；
}
BuildLocaleLink（区域设置，uri）{
如果（！this.props.isReady）{
返回“正在加载…”；
} 
如果（！locales.length）{
返回null；
}
返回locales.map（函数（locale）{
返回(

{locale.props.key}

);
})
}
渲染（）{
返回(

菜单


翻译


{locales=>(
this.buildLocaleLink（locales'translate'）
)}


证实


{locales=>(
this.buildLocaleLink（locales'validate'）
)}



);
}
}
导出默认边栏；

元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

---

LocalesProvider

是组件，而不是上下文，因此它没有

Consumer

属性。我还没有测试它，但是如果您导出创建的上下文，它可能会工作：

export const LocalesContext = React.createContext(defaultStore);

将您的导入更改为

import LocalesProvider, { LocalesContext } from './Providers/LocalesProvider.js';

---

并将

替换为

，修复了错误，但我现在在状态处理方面遇到了问题。上下文API是否会在状态更新时触发对底层子级的组件willChangeProps的
！我使用的是状态而不是道具，这在侧边栏中是错误的，因为消费者将数据作为道具传递，而不是状态！