开发者问题收集

TypeError：未定义不是一个对象（评估'_route$params.useremail'）

2022-12-21
74
javascript reactjs react-native

我该如何修复此错误？当我返回屏幕时，它显示此错误，有人知道我该如何修复此问题吗？我从不同的屏幕获取 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

useremail 和 userVerificationCode: 

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
                        })

                    }
                })
        }
    }
2个回答

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

Lars Vonk
2022-12-21

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

有一些可能的解决方案：

选项 1 不要通过导航参数传递数据；改用全局状态。您可以使用 react context 或状态管理库（如 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。

Arnas
2022-12-21