I think this is core concept of react but I can’t figure it out. This is react native Project and when user Click button Onpress
Function triggers, Request is correct and it Produced Expected Output But
My Problem is when i setTelJwt(data.body)
it doesn’t update the state variable ,when i console.log("check",GetData)
it says undefined
, when i do slight change to code and save the code console.log("check",GetData)
displayes exact output , when i retry click(second time) works the logic as expected
Is there Any Reason The State not updating at once?
const OTP = ({navigation,route}) => {
const { tel} = route.params || {};
const [OTP,setOTP]= useState()
const [TelJwt,setTelJwt] = useState(null)
const Onpress = async ()=>{
await refetchData()
console.log("check",GetData)
if (TelJwt !== null){
navigation.navigate('Name',{TelJwt});
}
}
const { data: GetData, refetch: refetchData } = useQuery({
queryKey: ['SMS'],
queryFn: async () => {
try {
console.log("gg", APIURL + "sms-validate")
console.log('otp', OTP)
console.log('tel', tel)
const response = await fetch(APIURL + "sms-validate", {
method: 'POST',
headers: {
Accept: '*/*',
'Content-Type': 'application/json',
},
body: JSON.stringify({
mobile: tel
, otp: OTP
}),
});
data = await response.json()
console.log(data.body)
if (data.status == "error") {
throw new Error(data.message);
return null
}
if (data.body == "incorrect"){
setOTP(null)
alert("Incorrect OTP")
return null
}
setTelJwt(data.body)
return (data.body);
} catch (error) {
console.error('Error fetching data:', error);
throw error;
}
},
enabled: false, retry: false
});
when i do slight change to code and save the code console.log("check",GetData)
displayes exact output , when i retry click(second time) works the logic as expected
Is there Any Reason The State not updating at once?