undefined 不是对象（正在评估...）- React Native

Question

我有数据（称为 imageNumber 和 i）从另一个屏幕传到这个屏幕。我已经异步完成了所有操作，但它仍然给我一个未定义的组件错误，我终生无法弄清楚代码有什么问题。

import React, { useRef, useState, useEffect } from "react";
import {
  SafeAreaView,
  StyleSheet,
  View,
  StatusBar,
  Text,
} from "react-native";
import { DynamicCollage } from "react-native-images-collage";
import { LayoutData } from "react-native-images-collage";

const photos = [
  "https://images.unsplash.com/photo-1551316679-9c6ae9dec224?w=800&q=80",
  "https://images.unsplash.com/photo-1562569633-622303bafef5?w=800&q=80",
  "https://images.unsplash.com/photo-1503656142023-618e7d1f435a?w=800&q=80",
];

export default CollageScreen = ({ navigation, route }) => {
  const { imageNumber, i } = route.params;
  const [key, setKey] = useState();
  const [numberOfImages, setNumberOfImages] = useState();
  const [loading, setLoading] = useState(false);
  const collageRef = useRef(null);


  // const NumberOfImages = 3;
  // const index = 3;

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const numberOfImages = await imageNumber;
        const key = await i;
        setKey(key);
        setNumberOfImages(numberOfImages);
      } catch (error) {
        console.log(err);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View style={styles.sectionContainer}>
          {loading ? (
            <View>
              <Text>loading...</Text>
            </View>
          ) : (
              <DynamicCollage
                ref={collageRef}
                direction={LayoutData[numberOfImages][key].direction}
                width={"100%"}
                height={400}
                images={photos}
                matrix={LayoutData[numberOfImages][key].matrix}
                separatorStyle={{ borderWidth: 2, backgroundColor: "#323031" }}
                containerStyle={{ backgroundColor: "#f1f1f1" }}
                // imageFocussedStyle={{ backgroundColor: "blue" }}
                imageSwapStyle={{ backgroundColor: "#323031" }}
                imageSwapStyleReset={{ color: "red", backgroundColor: "red" }}
              />
          )}
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 12,
  },
});

这是关于屏幕的完整代码，这是给出的错误

TypeError: undefined is not an object (评估 '_reactNativeImagesCollage.LayoutData[{ numberOfImages：numberOfImages }][{ 钥匙：钥匙 }]')

此错误位于： 在未知（在 SceneView.tsx:122） 在静态容器中 在 StaticContainer 中（在 SceneView.tsx:115） 在 EnsureSingleNavigator 中（在 SceneView.tsx:114） 在 SceneView 中（在 useDescriptors.tsx:153） 在 RCTView 中（在 View.js:34） 在视图中（在 CardContainer.tsx:245） 在 RCTView 中（在 View.js:34） 在视图中（在 CardContainer.tsx:244） 在 RCTView 中（在 View.js:34） 在视图中（在 CardSheet.tsx:33） 在 ForwardRef(CardSheet) 中（在 Card.tsx:573） 在 RCTView 中（在 View.js:34） 在视图中（在 createAnimatedComponent.js:165 处） 在 AnimatedComponent 中（在 createAnimatedComponent.js:215 处） 在 ForwardRef(AnimatedComponentWrapper) 中（在 Card.tsx:555） 在 PanGestureHandler (在 GestureHandlerNative.tsx:13) 在 PanGestureHandler 中（在 Card.tsx:549） 在 RCTView 中（在 View.js:34） 在视图中（在 createAnimatedComponent.js:165 处） 在 AnimatedComponent 中（在 createAnimatedComponent.js:215 处） 在 ForwardRef(AnimatedComponentWrapper) 中（在 Card.tsx:544） 在 RCTView 中（在 View.js:34） 在视图中（在 Card.tsx:538） 在卡片中（在 CardContainer.tsx:206） 在 CardContainer 中（在 CardStack.tsx:620） 在 RCTView 中（在 View.js:34） 在视图中（在 Screens.tsx:84） 在 MaybeScreen 中（在 CardStack.tsx:613） 在 RCTView 中（在 View.js:34） 在视图中（在 Screens.tsx:54） 在 MaybeScreenContainer 中（在 CardStack.tsx:495） 在 CardStack 中（在 StackView.tsx:462） 在键盘管理器中（在 StackView.tsx:458） 在 SafeAreaProviderCompat 中（在 StackView.tsx:455） 在 RCTView 中（在 View.js:34） 在视图中（在 StackView.tsx:454） 在 StackView 中（在 createStackNavigator.tsx:87 处） 在 StackNavigator 中（在 CollageStackScreens.js:11） 在 CollageStackScreens 中（在 SceneView.tsx:122） 在静态容器中 在 StaticContainer 中（在 SceneView.tsx:115） 在 EnsureSingleNavigator 中（在 SceneView.tsx:114） 在 SceneView 中（在 useDescriptors.tsx:153） 在 RCTView 中（在 View.js:34） 在视图中（在 BottomTabView.tsx:55） 在 SceneContent 中（在 BottomTabView.tsx:171） 在 RCTView 中（在 View.js:34） 在视图中（在 ResourceSavingScene.tsx:68） 在 RCTView 中（在 View.js:34） 在视图中（在 ResourceSavingScene.tsx:63） 在 ResourceSavingScene 中（在 BottomTabView.tsx:165） 在 RCTView 中（在 View.js:34） 在视图中（在 src/index.native.js:123） 在 ScreenContainer 中（位于 BottomTabView.tsx:145） 在 SafeAreaProviderCompat 中（在 BottomTabView.tsx:144） 在 BottomTabView（在 createBottomTabNavigator.tsx:45 处） 在 BottomTabNavigator（在 MainStackScreens.js:141） 在未知（在 SceneView.tsx:122） 在静态容器中 在 StaticContainer 中（在 SceneView.tsx:115） 在 EnsureSingleNavigator 中（在 SceneView.tsx:114） 在 SceneView 中（在 useDescriptors.tsx:153） 在 RCTView 中（在 View.js:34） 在视图中（在 CardContainer.tsx:245） 在 RCTView 中（在 View.js:34） 在视图中（在 CardContainer.tsx:244） 在 RCTView 中（在 View.js:34） 在视图中（在 CardSheet.tsx:33） 在 ForwardRef(CardSheet) 中（在 Card.tsx:573） 在 RCTView 中（在 View.js:34） 在视图中（在 createAnimatedComponent.js:165 处） 在 AnimatedComponent 中（在 createAnimatedComponent.js:215 处） 在 ForwardRef(AnimatedComponentWrapper) 中（在 Card.tsx:555） 在 PanGestureHandler (在 GestureHandlerNative.tsx:13) 在 PanGestureHandler 中（在 Card.tsx:549） 在 RCTView 中（在 View.js:34） 在视图中（在 createAnimatedComponent.js:165 处） 在 AnimatedComponent 中（在 createAnimatedComponent.js:215 处） 在 ForwardRef(AnimatedComponentWrapper) 中（在 Card.tsx:544） 在 RCTView 中（在 View.js:34） 在视图中（在 Card.tsx:538） 在卡片中（在 CardContainer.tsx:206） 在 CardContainer 中（在 CardStack.tsx:620） 在 RCTView 中（在 View.js:34） 在视图中（在 Screens.tsx:84） 在 MaybeScreen 中（在 CardStack.tsx:613） 在 RCTView 中（在 View.js:34） 在视图中（在 Screens.tsx:54） 在 MaybeScreenContainer 中（在 CardStack.tsx:495） 在 CardStack 中（在 StackView.tsx:462） 在键盘管理器中（在 StackView.tsx:458） 在 RNCSafeAreaProvider 中（在 SafeAreaContext.tsx:74） 在 SafeAreaProvider (在 SafeAreaProviderCompat.tsx:42) 在 SafeAreaProviderCompat 中（在 StackView.tsx:455） 在 RCTView 中（在 View.js:34） 在视图中（在 StackView.tsx:454） 在 StackView 中（在 createStackNavigator.tsx:87 处） 在 StackNavigator 中（在 AppStackScreen.js:15） 在未知（在 App.js:14） 在 EnsureSingleNavigator 中（在 BaseNavigationContainer.tsx:409） 在 ForwardRef(BaseNavigationContainer) 中（在 NavigationContainer.tsx:91） 在 ThemeProvider 中（在 NavigationContainer.tsx:90） 在 ForwardRef(NavigationContainer) (在 App.js:13) 在 UserProvider 中（在 App.js:12 处） 在 FirebaseProvider 中（在 App.js:11） 在 App 中（由 ExpoRoot 创建） 在 ExpoRoot (在 renderApplication.js:45) 在 RCTView 中（在 View.js:34） 在视图中（在 AppContainer.js:106） 在 DevAppContainer 中（在 AppContainer.js:121） 在 RCTView 中（在 View.js:34） 在视图中（在 AppContainer.js:132） 在 AppContainer 中（在 renderApplication.js:39 处）

• node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
• node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
• node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
• node_modules/expo/build/environment/react-native-logs.fx.js:27:4 出错
• node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
• node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
• node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
• node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
• node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
• 调用中的node_modules/regenerator-runtime/runtime.js:293:29
• node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
• node_modules/regenerator-runtime/runtime.js:154:27 在调用中
• node_modules/regenerator-runtime/runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
• node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
• node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
• node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
• node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass
• node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates
• node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmedates
• node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in __guard$argument_0
• node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
• node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 influshedQueue

• [本机代码]：flushedQueue 中为空
• [本机代码]：invokeCallbackAndReturnFlushedQueue 中为空

Answer 1

direction={ numberOfImages && LayoutData[numberOfImages][key].direction}
matrix={numberOfImages && LayoutData[numberOfImages][key].matrix}
try the above null check