Reactjs 反应本机元素错误:不变冲突:元素类型无效
我试图使用react原生元素的Reactjs 反应本机元素错误:不变冲突:元素类型无效,reactjs,react-native,react-props,Reactjs,React Native,React Props,我试图使用react原生元素的FormValidationMessage。我看不出我做错了什么。我得到一个错误: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forg
FormValidationMessage
。我看不出我做错了什么。我得到一个错误:
Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
我导入的内容就像:
我使用它的函数:
showLoginError() {
console.log(this.props.error); //I can log the correct error here
if (this.props.error) {
return(
<FormValidationMessage>{this.props.error}</FormValidationMessage>
)
}
}
showLoginError(){
console.log(this.props.error);//我可以在这里记录正确的错误
if(this.props.error){
返回(
{this.props.error}
)
}
}
我直接在render中调用此函数,如下所示
<View style={{width: 250}}>
{this.showLoginError()}
</View>
{this.showLoginError()}
我浏览了整个互联网,但似乎没有一个明确的解决方案。在我的案例中(使用Webpack),它是以下两者之间的区别:
import {MyComponent} from '../components/xyz.js';
vs
第二个函数起作用,而第一个函数导致错误。如果没有错误,则需要使函数返回null
showLoginError() {
console.log(this.props.error); //I can log the correct error here
if (this.props.error) {
return(
<FormValidationMessage>{this.props.error}</FormValidationMessage>
)
} else {
return null;
}
}
showLoginError(){
console.log(this.props.error);//我可以在这里记录正确的错误
if(this.props.error){
返回(
{this.props.error}
)
}否则{
返回null;
}
}
在最新版本中,他们似乎已将该组件从其代码库中删除
此.props.error
错误是什么样子的?它是对象、字符串还是其他类型的数据?@remelkabir它是字符串。我正在使用react redux,它设置在我的减速器中。我可以在回来之前把它记录下来。看起来他们已经把组件从代码库中删除了,但是他们没有更新他们的文档@这是一个社区项目。如果您有时间的话,您可以随时请求自己更新文档。:)我建议将其用作文档,而不是自述文件。谢谢,如果你把上面的答案贴出来,我会接受的。这没有帮助。我做的和医生一样:谢谢你的回答。确实如此!你现在知道如何解决这个问题了吗?我会在react-native元素中寻找类似的组件,或者根据需要编写一个自定义组件。谢谢@remelkabir-实际上在阅读文档后,我发现在react-native元素中,他们已将此功能移动到可以接收“错误”作为道具更新链接的组件
import MyComponent from '../components/xyz.js';
showLoginError() {
console.log(this.props.error); //I can log the correct error here
if (this.props.error) {
return(
<FormValidationMessage>{this.props.error}</FormValidationMessage>
)
} else {
return null;
}
}