React Native TypeError: undefined is not an object (evaluating 'props.getItem')

Question

在我的 React Native 应用程序（使用 expo）上导航到某些屏幕时，出现以下错误：

TypeError: undefined is not an object (evaluating 'props.getItem')

它之前一直运行良好，通过研究它似乎是我的 packages/babel 的问题，但我已经尝试了几种解决方案，包括

npm upgrade --latest

并重置缓存，但到目前为止没有成功。

这是我的内容 package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest",
    "test:watch": "npm test -- --watch"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.7",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-picker/picker": "1.16.1",
    "@react-navigation/bottom-tabs": "^5.11.15",
    "@react-navigation/drawer": "^5.12.9",
    "@react-navigation/material-top-tabs": "^5.3.19",
    "@react-navigation/native": "^5.9.8",
    "@react-navigation/stack": "^5.14.9",
    "expo": "^42.0.3",
    "expo-app-loading": "^1.1.2",
    "expo-font": "~9.2.1",
    "expo-status-bar": "~1.0.4",
    "jwt-decode": "^3.1.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-currency-input": "^1.0.1",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-qrcode-svg": "^6.1.1",
    "react-native-reanimated": "^2.2.1",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-svg": "^12.1.1",
    "react-native-tab-view": "^2.16.0",
    "react-native-toast-message": "^1.6.0",
    "react-native-web": "^0.17.1",
    "react-redux": "^7.2.5",
    "redux": "^4.1.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-methods": "^7.14.5",
    "@types/jest": "^27.0.1",
    "@types/react": "~16.9.35",
    "@types/react-native": "^0.63.53",
    "@types/react-test-renderer": "^17.0.1",
    "babel-jest": "^27.2.0",
    "jest-expo": "^42.1.0",
    "react-test-renderer": "^17.0.2",
    "redux-mock-store": "^1.5.4",
    "typescript": "~4.0.0"
  },
  "private": true,
  "jest": {
    "preset": "jest-expo"
  }
}

这是我的 babel.config.js:

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      ["@babel/plugin-proposal-private-methods", { "loose": true }],
      'react-native-reanimated/plugin'
    ],
  };

完整的堆栈跟踪是这样的：

TypeError: undefined is not an object (evaluating 'props.getItem')

This error is located at:
    in FlatList (at Modal.tsx:65)
    in RCTView (at View.js:34)
    in View (at Modal.tsx:64)
    in RCTView (at View.js:34)
    in View (at Modal.tsx:57)
    in MenuModal (at SceneView.tsx:130)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:123)
    in EnsureSingleNavigator (at SceneView.tsx:122)
    in SceneView (at useDescriptors.tsx:181)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:623)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at Screens.tsx:74)
    in MaybeScreen (at CardStack.tsx:616)
    in RNSScreenContainer (at src/index.native.tsx:186)
    in ScreenContainer (at Screens.tsx:50)
    in MaybeScreenContainer (at CardStack.tsx:498)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in View (at GestureHandlerRootView.android.tsx:21)
    in GestureHandlerRootView (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at Root.tsx:12)
    in RootStack (at SceneView.tsx:130)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:123)
    in EnsureSingleNavigator (at SceneView.tsx:122)
    in SceneView (at useDescriptors.tsx:181)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:623)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at Screens.tsx:74)
    in MaybeScreen (at CardStack.tsx:616)
    in RNSScreenContainer (at src/index.native.tsx:186)
    in ScreenContainer (at Screens.tsx:50)
    in MaybeScreenContainer (at CardStack.tsx:498)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in GestureHandlerRootView (at GestureHandlerRootView.android.tsx:26)
    in GestureHandlerRootView (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at MainNavigator.tsx:60)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:411)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at MainNavigator.tsx:59)
    in MainNavigator (at App.tsx:64)
    in Provider (at App.tsx:57)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
at node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue

如果相关，这里是错误似乎来自的模态组件：

const BUTTONS = [
    {
        id: "1",
        title: "Button1",
        icon: "button1-icon",
    },
    {
        id: "2",
        title: "Button2",
        icon: "button2-icon",
    },        
];

const Modal = ({ navigation }: any) => {
    const renderButton = ({ item }: any) => (
        <GridTile
            title={item.title}
            colour={colours.accent}
            icon={item.icon}
            onSelect={() => navigation.navigate(item.title)}
        />
    );

    return (
        <View>                
            <View>
                <FlatList
                    data={BUTTONS}
                    renderItem={renderButton}                        
                    numColumns={2}
                />
            </View>
        </View>
    );
};    


export default Modal;

Answer 1

我终于设法解决了这个错误，方法是删除我的 babel.config.js 文件并将其内容放入我的 package.json 中，如下所示：

"babel": { 
    "presets": ["module:metro-react-native-babel-preset"], 
    "plugins": [ 
      ["@babel/plugin-proposal-private-methods", { "loose": true }], 
      "react-native-reanimated/plugin"
    ]
  }

Answer 2

将内容放入 package.json 对我不起作用，但是，这确实有效：

从babel.config.js中删除@babel/plugin-proposal-class-properties，然后通过清除缓存重新启动：expo r -c。

仅供参考，我从 Expo 43 升级到 Expo 44 后开始收到此错误。这就是我的 babel.config.js 的样子：

module.exports = {
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    // ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "react-native-reanimated/plugin",
  ]
}

React Native TypeError: undefined is not an object (evaluating 'props.getItem')

React Native TypeError: undefined is not an object (evaluating 'props.getItem')

package.json

babeljs

react-native

expo