TypeError: undefined is not an object (评估'_route$params.useremail')

Question

我该如何解决这个错误？ 当我支持我的屏幕而不是它向我显示此错误时，任何人都知道我该如何解决此问题？ useremail 和 userVerificationCode 我是从不同的屏幕上得到的，你们也可以看到我的 useremail 和 userVerificationCode 来自的功能

const ForgetPassword_Verify = ({ navigation, route }) => {

  const { useremail, userVerificationCode } =  route.params
  
  console.log(useremail, userVerificationCode)

  const [verificationCode, setVerificationCode] = useState('');


  const handleVerificationCode = () => {

    if (verificationCode != userVerificationCode) {
      alert('Invalid Verification Code')
    }
    else {
      alert('Verification Code Matched')
      navigation.navigate('forgetpassword_choose_newpassword', { email: useremail })
    }
  }
  return (
    <View style={containerFull}>
      <TouchableOpacity onPress={() => navigation.navigate('forgetpassword_email')} style={goback}>
        <AntDesign name="arrowleft" size={24} color="grey" />
        <Text style={{ color: 'grey', fontSize: 16, marginLeft: 5, fontWeight: 'bold' }}>Go Back</Text>
      </TouchableOpacity>
      {/* <Image source={logo} style={logo1} /> */}
      <Text style={formHead3}>A verification code is sent to your email!</Text>
      <TextInput placeholder='Enter 6 digit code' placeholderTextColor="grey" style={formInput}
        onChangeText={(text) => setVerificationCode(text)}
      />

      <Text style={formbtn} onPress={() => handleVerificationCode()}>Next</Text>
    </View>
  )
}

export default ForgetPassword_Verify

用户邮箱和用户验证码：

const handleEmail = () => {
        if (email === '') {
            alert('Please enter email')
        }

        else {
            setLoading(true)
            fetch('http://10.0.2.2:3000/verifyforgetpassword', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ email: email })
            })
                .then(res => res.json()).then(data => {
                    if (data.error === "User not found with this email") {
                        alert('User not found with this email')
                        setLoading(false)
                    }
                    else if (data.message === "Verification Code Sent to your Email") {
                        setLoading(false)
                        alert(data.message);
                        navigation.navigate('forgetpassword_verify', {
                            useremail: data.email,
                            userVerificationCode: data.VerificationCode
                        })

                    }
                })
        }
    }

Answer 1

你在使用react-router吗？ 我也看不到调用此handleEmail函数的位置。 但是猜测我在react-router中看到的内容，您使用useParams来访问参数。 请参阅： https ://reactrouter.com/en/main/hooks/use-params

Answer 2

您从导航参数接收数据，因此如果您通过后退按钮而不是通过navigation.navigate导航到该屏幕。导航属性route.params将未定义，因为后退按钮不发送任何参数。

有一些可能的解决方案：

选项 1不要通过导航参数传递数据； 改用全局状态。 您可以使用React 上下文或状态管理库，例如 Redux。 在任何屏幕上修改全局状态的数据，并在另一个屏幕上读取数据。 我认为这是理想的解决方案，因为如果您仍然通过导航参数处理数据，则此问题可能会在另一个屏幕上再次发生。

选项 2尝试覆盖您的后退按钮并将参数传递给导航。 在您想要在按下后退按钮时返回到forgetpassword_verify屏幕的任何组件屏幕上执行此操作。

import { BackHandler } from 'react-native';

useEffect(() => {
   const backHandler = BackHandler.addEventListener('hardwareBackPress', () => { 
      navigation.navigate('forgetpassword_verify', {
         useremail,
         userVerificationCode
      })
      return true;
   })

   return () => backHandler.remove()
}, [])

选项 3使用选项headerBackVisible: false禁用后退按钮。 并实现您自己的后退按钮 UI。