How can i fix this error? when i am backing my screen than its showing me this error anyone knows how can i fix this problem? useremail and userVerificationCode i am getting from diffrent screen, you all can also see the function by which my useremail and userVerificationCode is coming from

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

                    }
                })
        }
    }

CodePudding user response：

Are you using react-router? I also do not see where this handleEmail function is called. But guessing on what I see within the react-router you use the useParams to access the params. See: https://reactrouter.com/en/main/hooks/use-params

CodePudding user response：

You receive the data from navigation parameter, so if you navigate to that screen via back button not via navigation.navigate the attribut route.params will undefined, because back button not send any params.

There are some possible solution:

Option 1 Don't pass the data via navigation parameters; use global state instead. You can use react context or a state management library such as Redux. Modify your data in global state on any screen, and read the data on another screen. This is the ideal solution, I think, because this issue can happen again on another screen if you still handle your data via the navigation parameter.

Option 2 Try to override your back button and pass parameters to navigation. Do this on any component screen that you want to go back to the forgetpassword_verify screen on back button pressed.

import { BackHandler } from 'react-native';

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

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

Option 3 Disable the back button with option headerBackVisible: false​. And implement your own back button UI.