时间戳

首页 > 解决方案 > undefined 不是对象（正在评估...）- React Native

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

问题描述

我有从另一个屏幕到这个屏幕的数据（称为 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 }][{ key: key }]')

此错误位于：Unknown (at SceneView.tsx:122) in StaticContainer in StaticContainer (at SceneView.tsx:115) in EnsureSingleNavigator (at SceneView.tsx:114) in SceneView (at useDescriptors.tsx:153) in 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) 在 View (在 createAnimatedComponent.js:165) 在 AnimatedComponent (在 createAnimatedComponent.js:215 ) 在 ForwardRef(AnimatedComponentWrapper) (在 Card.tsx:555) 在 PanGestureHandler (在 GestureHandlerNative.tsx:13) 在 PanGestureHandler (在 Card.tsx:549) 在 RCTView (在 View.js:34) 在 View (在 createAnimatedComponent. js:165) 在 AnimatedComponent (在 createAnimatedComponent.js:215) 在 ForwardRef(AnimatedComponentWrapper) (在 Card.tsx:544) 在 RCTView (在 View.js:34) 在视图 (在 Card.tsx:538) 在 Card (在 CardContainer.tsx:206) 在 CardContainer (在 CardStack .tsx:620) 在 RCTView (在 View.js:34) 在 View (在 Screens.tsx:84) 在 MaybeScreen (在 CardStack.tsx:613) 在 RCTView (在 View.js:34) 在 View (在 Screens .tsx:54) 在 MaybeScreenContainer (at CardStack.tsx:495) 在 CardStack (at StackView.tsx:462) 在 KeyboardManager (at StackView.tsx:458) 在 SafeAreaProviderCompat (at StackView.tsx:455) 在 RCTView (at View .js:34) 在 View (at StackView.tsx:454) 在 StackView (at createStackNavigator.tsx:87) 在 StackNavigator (at CollageStackScreens.js:11) 在 CollageStackScreens (at SceneView.tsx:122) 在 StaticContainer 在 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) 在 View (在 ResourceSavingScene.tsx: 68) 在 RCTView (at View.js:34) 在 View (at ResourceSavingScene.tsx:63) 在 ResourceSavingScene (在 BottomTabView.tsx:165) 在 RCTView (at View.js:34) 在 View (at src/index. native.js:123) 在 ScreenContainer (在 BottomTabView.tsx:145) 在 SafeAreaProviderCompat (在 BottomTabView.tsx:144) 在 BottomTabView (在 createBottomTabNavigator.tsx:45) 在 BottomTabNavigator (在 MainStackScreens.js:141) 在 Unknown (在SceneView.tsx:122) 在 StaticContainer 中 StaticContainer (在 SceneView.tsx:115) 在 EnsureSingleNavigator (在 SceneView.tsx:114) 在 SceneView (在 useDescriptors.tsx:153) 在 RCTView (在 View.js:34) 在 View （在 CardContainer.tsx:245）在 RCTView 中（在 View.js:34）在 View 中（在 CardContainer.tsx:244) 在 RCTView (at View.js:34) 在 View (at CardSheet.tsx:33) 在 ForwardRef(CardSheet) (at Card.tsx:573) 在 RCTView (at View.js:34) 在 View (在 createAnimatedComponent.js:165) 在 AnimatedComponent (在 createAnimatedComponent.js:215) 在 ForwardRef(AnimatedComponentWrapper) (在 Card.tsx:555) 在 PanGestureHandler (在 GestureHandlerNative.tsx:13) 在 PanGestureHandler (在 Card.tsx:549)在 RCTView (at View.js:34) 在 View (at createAnimatedComponent.js:165) 在 AnimatedComponent (at createAnimatedComponent.js:215) 在 ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544) 在 RCTView (at View.js :34) 在视图中 (在 Card.tsx:538) 在卡片中 (在 CardContainer.tsx:206) 在 CardContainer (在 CardStack.tsx:620) 在 RCTView (在 View.js:34) 在视图中 (在 Screens.tsx :84) 在 MaybeScreen (at CardStack.tsx:613) 在 RCTView (at View.js:34) 在 View (at Screens.tsx:54) 在 MaybeScreenContainer (at CardStack.tsx:495) 在 CardStack (at StackView.tsx:462) 在 KeyboardManager (at StackView.tsx:458) 在 RNCSafeAreaProvider (at SafeAreaContext.tsx:74) 在 SafeAreaProvider (at SafeAreaProviderCompat.tsx: 42) 在 SafeAreaProviderCompat (在 StackView.tsx:455) 在 RCTView (在 View.js:34) 在 View (在 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)

标签： react-nativeasynchronouscomponents

解决方案

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

推荐阅读