Блог

Недавно я столкнулся с проблемой, связанной со сборкой собственного производства react с Android и ios. У меня есть formik форма, и onsubmit из нее я вызвал API с функцией стрелки и обработал этот ответ. Он отлично работал в симуляторе и отладке с реальным устройством, но когда мы создавали apk или ipa использовали его, функция не работала, через 1 день отладки, когда я изменил ее на обычную функцию javascript, она работала нормально.

почему это происходит?

Код Функции Стрелки (Не Работал)

 const forget = values =gt; {  Alert.alert('third')  const url = 'forgetpassword';  post(url, values).then(data =gt; handleForgetResponse(data));  };  

Обычный код функции (Рабочий)

 function forget (values){  Alert.alert('third')  const url = 'forgetpassword';  post(url, values).then(data =gt; handleForgetResponse(data));  }  

Код компонента

 lt;Formik  initialValues={{  email: '',  }}  innerRef={formRef}  onSubmit={(values, {setSubmitting}) =gt; {  Alert.alert('first')  forget(values);  Alert.alert('second')  }}  validate={validateForget}gt;  {props =gt; (  lt;View style={{flex: 1}}gt;  lt;View style={styles.forgetpassword}gt;  lt;Text  style={{  fontSize: an(20),  fontWeight: '700',  marginVertical: hp(1),  }}gt;  {'Forgot Password'}  lt;/Textgt;  lt;Text style={{fontWeight: '200'}}gt;  {'Please enter your email address or mobile'}  lt;/Textgt;  lt;Text style={{fontWeight: '200'}}gt;  {'number to receive a verification code.'}  lt;/Textgt;  lt;/Viewgt;  lt;RenderTextInput  text={'Registered Email OR Mobile Number'}  style={{width: '90%', marginHorizontal: hp(2)}}  value={props.values.email}  autoCapitalize={'none'}  autoCapitalize={'words'}  onChangeText={props.handleChange('email')}  error={props.touched.email amp;amp; props.errors.email}  blur={() =gt; props.setFieldTouched('email', true)}  returnKeyType="next"  onSubmitEditing={() =gt;  passwordRef?.current?.focus()  }gt;lt;/RenderTextInputgt;   lt;RenderButton  text={'Submit'}  textStyle={{color: 'white'}}  style={{  marginVertical: hp(2),  marginHorizontal: hp(2),  height: hp(7),  width: '90%',  }}  onPress={props.handleSubmit}gt;lt;/RenderButtongt;  lt;/Viewgt;  )}  lt;/Formikgt;  

Функция

 // const forget = values =gt; {  // Alert.alert('third')  // const url = 'forgetpassword';  // post(url, values).then(data =gt; handleForgetResponse(data));  // };   function forget (values){  Alert.alert('third')  const url = 'forgetpassword';  post(url, values).then(data =gt; handleForgetResponse(data));  }   const handleForgetResponse = data =gt; {  Alert.alert('fourth')  ShowToast(data.message, data.status);  if (data.status == 1) {  navigation.navigate('Verification', {  email: data.email,  });  }  };  

Проблема заключается в вашей реализации с двумя типами функций и игнорировании hoisting концепции в Javascript.

Быстрое решение:

 function forget (values){  Alert.alert('third')  const url = 'forgetpassword';  post(url, values).then(data =gt; handleForgetResponse(data));  }   function handleForgetResponse (data) {  Alert.alert('fourth')  ShowToast(data.message, data.status);  if (data.status == 1) {  navigation.navigate('Verification', {  email: data.email,  });  }  };  

Объяснение:

Вы можете вызвать обычную функцию перед ее определением, но вы не можете сделать то же самое с функцией стрелки. давайте рассмотрим этот пример:

 regularFn() // work fine! arrowFn() // ---gt; Cannot access 'arrowFn' before initialization  function regularFn () {  console.log("regular funciton called") }  const arrowFn = () =gt; {  console.log("arrow funciton called") }  

это regularFn() сработает, но arrowFn() вызовет ошибку.

Возвращаясь к вашему случаю, вы используете функцию со стрелкой в forget функции перед ее определением. таким образом, вы можете определить его перед forget функцией или использовать обычную функцию для решения проблемы.