解决React-Native项目报错【Element type is invalid】

本文总结了React Native项目中遇到的“无效的元素类型”错误的两个常见原因及解决方案,包括组件的错误导入导出方式和组件调用区域不当。提供了正确的组件导出与导入示例,以及调整组件调用位置的建议。

在这里插入图片描述
运行项目时出现:无效的元素类型
在网上搜集了几个fix bug的方法,现在总结一下。这也时是当再次遇见相类似的问题时的解决的思路。

可能问题一:组件的导入导出出错

在这之前我并不知道组件类的两种导出方式有什么区别,以至于在一段时间中一直糊里糊涂。现在做一下区分:
1:第一种方式

class PersonalImg extends Component {
  //定义组件
}

export default PersonalImg

在这种方式定义组件并且导出,需要使用export default PersonalImg的方式进行导出。而在使用到这个PersonalImg组件的地方就需要使用import PersonalImg from '../profile/PersonalImg'这种导入方式。
2:第二种方式

export default class PersonalImg extends Component {
  //定义组件
}

直接在定义组件的地方export组件,此时就不需要使用export default PersonalImg这种方式。需要特别注意的是,在使用PersonalImg组件的地方的导入方式:
import { PersonalImg } from '../profile/PersonalImg'
上述两种方式如果搞混了,那么就会出现文章顶部截图中的错误。
参考链接:https://stackoverflow.com/questions/48738761/warning-react-createelement-type-is-invalid-bundle-js

可能问题二:组件调用区域出错

 return (
      <Container>
        <Content>
          <ScrollView>
            {photosContainer}
          </ScrollView>
        </Content>
      </Container>
    )

当调用photosContainer时出现相同的报错信息。此时应该注意,组件的调用区域出错。在查看了React-Native的官方文档之后,发现ScrollView的使用必须要有一个固定的高度,并且他的父元素也要有固定的高度,此时删掉ScrollView标签,项目正常运行起来。

return (
      <Container>
        <Content>
          {photosContainer}
        </Content>
      </Container>
    )

参考链接:https://segmentfault.com/q/1010000011862463

最后的话:
从无从下手到思路清晰,需要经历一个糊涂的阶段。坚持不懈的去思考,去寻找思路 ,肯定会成功的。耐心,信心,

BUNDLE ./index.js LOG Running "VisionCameraExample" with {"rootTag":11} LOG Loading react-native-worklets-core... LOG Worklets loaded successfully LOG Re-rendering Navigator. Camera: denied | Microphone: denied ERROR Warning: React.jsx: 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. Check the render method of `SceneView`. in SceneView (created by NativeStackView) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by ScreenStack) in RNSScreenStack (created by ScreenStack) in ScreenStack (created by NativeStackView) in FrameSizeProviderInner (created by FrameSizeProvider) in FrameSizeProvider (created by SafeAreaProviderCompat) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaProviderCompat) in SafeAreaProviderCompat (created by NativeStackView) in NativeStackView (created by NativeStackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationStateListenerProvider (created by NavigationContent) in NavigationContent in Unknown (created by NativeStackNavigator) in NativeStackNavigator (created by App) in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by App) in ThemeProvider in EnsureSingleNavigator in BaseNavigationContainer in NavigationContainerInner (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in VisionCameraExample(RootComponent) ERROR Warning: Error: 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.
最新发布
07-30
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值