添加Resend OTP功能后出现TypeError: Cannot read property 'OtpInput' of undefined求助

添加重发OTP功能前一切正常，现在出现崩溃报错TypeError: Cannot read property 'OtpInput' of undefined，已经尝试重新安装依赖、修改babel.config，还是找不到原因，代码如下：

import React, {useCallback, useEffect, useState} from 'react';
import {Text, TouchableOpacity, View, Alert} from 'react-native';
import {OtpInput} from 'react-native-otp-entry';
import Icon from 'react-native-vector-icons/AntDesign';
import styles from './OTPScreenStyles';
import {validateOTP} from '../../../api/validateOTP';
import {resendOTP} from 'api/resendOTP';
import {RouteProp} from '@react-navigation/native';
import {RootStackParamList} from '../../../../App';

type OTPScreenRouteProp = RouteProp<RootStackParamList, 'OTPScreen'>;

type OTPScreenProps = {
  navigation: any;
  route: OTPScreenRouteProp;
};

const OTPScreen: React.FC<OTPScreenProps> = ({navigation, route}) => {
  const {email, mobile, requestId} = route.params;
  const [timer, setTimer] = useState(30);
  const [otp, setOtp] = useState('');

  const timeOutCallBack = useCallback(() => {
    setTimer(currTimer => {
      if (currTimer <= 0) return 0;
      return currTimer - 1;
    });
  }, []);

  useEffect(() => {
    if (timer > 0) {
      const timeoutId = setTimeout(timeOutCallBack, 1000);
      return () => clearTimeout(timeoutId);
    }
  }, [timer, timeOutCallBack]);

  const resetTimer = () => {
    if (timer === 0) {
      setTimer(30);
    }
  };

  const handleResendOTP = async () => {
    try {
      const response = await resendOTP(email, mobile, requestId);
      resetTimer();
    } catch (error: any) {
      Alert.alert(
        'Error',
        error.message || 'Failed to resend OTP. Please try again.',
      );
    }
  };

  const handleOtpFilled = async () => {
    try {
      Alert.alert('Success', 'OTP Verified Successfully!', [
        {text: 'OK', onPress: () => navigation.push('SelectCompany')},
      ]);
    } catch (error: any) {
      Alert.alert('Error', error.message || 'Invalid OTP. Please try again.');
    }
  };

  return (
    <View style={styles.ScreenContainer}>
      <TouchableOpacity style={styles.ArrowContainer}>
        <Icon
          name="arrowleft"
          color="#000000"
          size={35}
          onPress={() => {
            navigation.push('PhoneNumber');
          }}
        />
      </TouchableOpacity>
      <View style={styles.DescriptionContainer}>
        <Text style={styles.DescriptionText}>OTP Verification</Text>
        <Text style={styles.DescriptionSubText}>
          Please enter the code sent to your mobile
        </Text>
        <Text style={styles.DescriptionPhoneText}>{mobile}</Text>
      </View>
      <OtpInput
        numberOfDigits={4}
        autoFocus={true}
        onFilled={setOtp}
        theme={{
          containerStyle: styles.OtpInputContainer,
          pinCodeContainerStyle: styles.PinCodeContainer,
          pinCodeTextStyle: styles.PinCodeText,
          focusStickStyle: styles.FocusStick,
          focusedPinCodeContainerStyle: styles.FocusedPinCodeContainer,
        }}
      />
      <View style={styles.FooterContainer}>
        <Text style={styles.FooterText}>
          Didn't get the code?{' '}
          <Text
            style={styles.FooterSubText}
            onPressIn={() => {
              if (timer === 0) {
                handleResendOTP();
              }
            }}>
            Resend
          </Text>{' '}
          in {timer} seconds
        </Text>
      </View>
      <TouchableOpacity
        style={styles.VerifyContainer}
        onPress={handleOtpFilled}>
        <Text style={styles.VerifyText}>Verify</Text>
      </TouchableOpacity>
    </View>
  );
};

export default OTPScreen;

解决方法 #

• 修正resendOTP的导入路径：代码中resendOTP用了绝对路径'api/resendOTP'，而validateOTP用的是相对路径../../../api/validateOTP，这种不一致可能导致模块解析错误，进而影响其他导入模块的加载。把resendOTP的导入改成对应层级的相对路径，比如../../../api/resendOTP。

• 重新安装并清理缓存：卸载重装react-native-otp-entry包，同时清除React Native缓存：

  npm uninstall react-native-otp-entry && npm install react-native-otp-entry
  npx react-native start --reset-cache
  

• 检查babel配置：如果修改过babel.config.js，确认没有配置错误影响模块解析，比如别名配置是否和api路径冲突，导致模块无法正确加载。

• 验证包版本兼容性：确认react-native-otp-entry的版本和当前React Native版本兼容，查看包的官方文档确认支持的RN版本范围，若不兼容则调整包版本。

内容的提问来源于stack exchange，提问作者Devam Barbhaya