如何修复预期的类/函数错误?

How to fix an expected a class/function error?

提问人:Brian Var 提问时间:8/6/2023 最后编辑:Brian Var 更新时间:8/6/2023 访问量:21

问:

我正在使用此处的升级助手将 react native 应用程序升级到版本 72.3。我注意到的是初始应用程序屏幕加载没有问题。但是,一旦我使用 's - 组件触发到新屏幕的导航,就会在要渲染的组件上抛出运行时错误。@react-navigation/[email protected]Tab.Screen

应用引发以下运行时错误:

    ERROR  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.

Check the render method of `TravelSideView`.

This error is located at:
    in RCTView (created by View)
    in View
    in Unknown (created by TouchableOpacity)
    in TouchableOpacity (created by TouchableOpacity)
    in TouchableOpacity (created by TravelSideView)

查看错误,我发现了一个建议,以确保正在加载的组件包含默认导出。(确实如此)

知道容器组件语法需要更改什么才能解决此错误吗?

下面是屏幕容器的定义 - 选项卡导航到:TravelSideViewContainer

import TravelSideViewContainer from './travelSide/TravelSideViewContainer';

function Travel() {
  return (
    <Stack.Navigator
      headerMode="screen"
      screenOptions={{
        headerTintColor: 'white',
        headerStyle: {backgroundColor: SOP_BLUE},
      }}>
      <Stack.Screen
        name={LocalizedStringsMap.viewThreeTitle}
        component={TravelSideViewContainer}
      />
    </Stack.Navigator>
  );
}

            <Tab.Screen
              testID="travelTab"
              name="Travel"
              title={LocalizedStringsMap.viewThreeTabTitle}
              component={Travel}
              options={{
                tabBarLabel: LocalizedStringsMap.viewThreeTabTitle,
              }}
            />

这是传递给 screen prop 的容器组件的要点。其中确实包括默认导出,如下所示:component

TravelSideView容器

import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
// import * as NavigationStateActions from '../navigation/NavigationState';
import * as TravelSideStateActions from '../travelSide/TravelSideState';
import TravelSideView from './TravelSideView';

export default connect(
  (state) => ({
    unitType: state.getIn(['travelSide', 'unitType']),
  }),
  (dispatch) => {
    return {
      travelSideStateActions: bindActionCreators(
        TravelSideStateActions,
        dispatch,
      ),
    };
  },
)(TravelSideView);

react-native 运行时错误 react-navigation-bottom-tab react-class-based-component

评论


答: 暂无答案