javascript - TypeError: undefined is not an object (evalating '_this.props.card = card') - React Native with EXPO

Question

我仍然是 React Native 的菜鸟。当我保存我的反应原生项目时，我看到这个 TypeError 这个错误：

我相信当我保存并且它没有“this.card = card”的初始参数时会发生这种情况，但我不知道如何在函数中设置它

代码：

import React from "react";
import {
  TouchableOpacity,
  StyleSheet,
  View,
  Button,
  Image
} from "react-native";
import LottieView from "lottie-react-native";
import Front from "./assets/Front.jpg";
import Back from "./assets/Back.jpg";
import CardFlip from "react-native-card-flip";
export default function Carteirinha({ navigation }) {

  const animation = React.useRef(null);
  const [speed, setSpeed] = React.useState(0);
 

 
  return (

    
    <View style={styles.container}>

      <CardFlip style={styles.cardContainer} ref={(card) => (this.card = card)}>
        <TouchableOpacity style={styles.card} onPress={() => this.card.flip()}>
          <Image source={Front} style={styles.cardContainer}></Image>
        </TouchableOpacity>
        <TouchableOpacity style={styles.card} onPress={() => this.card.flip()}>
          <Image source={Back} style={styles.cardContainer}></Image>
        </TouchableOpacity>
      </CardFlip>
      

     
     <LottieView
          ref={animation}

          style={{
            width: 420,
            height: 200,
            //backgroundColor: '#000',
          }}
          //source={require('./assets/Lottie/34654-hand-arrows.json')}
          source={require('./assets/Lottie/53969-click.json')}
          speed={1}
          autoPlay
          loop={true}
        
        />
     
     


    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  cardContainer: {
    width: 320,
    height: 509
  },
  card: {
   
    width: 320,
    height: 509,
    backgroundColor: "#FE474C",
    borderRadius: 5,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5
  },
  card1: {
    backgroundColor: "#FE474C"
  },
  card2: {
    backgroundColor: "#FEB12C"
  },
  label: {
    lineHeight: 509,
    textAlign: "center",
    fontSize: 55,
    fontFamily: "System",
    color: "#ffffff",
    backgroundColor: "transparent"
  }
});

我正在为 React Native 使用这个卡片翻转动画： https ://github.com/lhandel/react-native-card-flip

控制台日志

TypeError: undefined is not an object (evaluating '_this.props.card = card')

This error is located at:
    in CardFlip (at Carteirinha/index.js:35)
    in RCTView (at View.js:34)
    in View (at Carteirinha/index.js:33)
    in Carteirinha (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 (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 RCTView (at View.js:34)
    in View (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at App.js:20)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at App.js:19)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    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:294:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
at node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\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
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

标签： javascriptreact-nativeexpo

Answer 1

问题是您正在尝试访问this功能组件（其中的箭头功能）。这是不允许的。

你提到他们this在他们的例子中使用，但他们的例子缺少很多上下文。他们的示例代码可能来自只有类组件（在哪里this可以使用）。

在您的情况下，请检查文档useRef以及它引用的其他页面。您可以像这样使用它：

  const cardFlip = useRef();
 
  return (
    <View style={styles.container}>
      <CardFlip style={styles.cardContainer} ref={cardFlip}>
        <TouchableOpacity style={styles.card} onPress={() => cardFlip.current.flip()}>
          <Image source={Front} style={styles.cardContainer}></Image>
        </TouchableOpacity>
        <TouchableOpacity style={styles.card} onPress={() => cardFlip.current.flip()}>
          <Image source={Back} style={styles.cardContainer}></Image>
        </TouchableOpacity>
      </CardFlip>