时间戳

首页 > 解决方案 > React Native：生产构建上的箭头功能不起作用

javascript - React Native：生产构建上的箭头功能不起作用

问题描述

我最近遇到了一个使用 android 和 ios 反应原生生产构建的问题。我有一个formik表单onsubmit，其中我调用了一个带有箭头函数的 API 并处理该响应。它在模拟器中工作正常并使用真实设备进行调试，但是当我们创建apk或ipa使用它时，该功能无法正常工作，经过 1 天的调试后，当我将其更改为普通的 javascript 函数时，它工作正常。

为什么会这样？

箭头功能代码（不工作）

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

正常功能代码（工作）

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

组件代码

 <Formik
            initialValues={{
              email: '',
            }}
            innerRef={formRef}
            onSubmit={(values, {setSubmitting}) => {
              Alert.alert('first')
              forget(values);
              Alert.alert('second')
            }}
            validate={validateForget}>
            {props => (
              <View style={{flex: 1}}>
                <View style={styles.forgetpassword}>
                  <Text
                    style={{
                      fontSize: an(20),
                      fontWeight: '700',
                      marginVertical: hp(1),
                    }}>
                    {'Forgot Password'}
                  </Text>
                  <Text style={{fontWeight: '200'}}>
                    {'Please enter your email address or mobile'}
                  </Text>
                  <Text style={{fontWeight: '200'}}>
                    {'number to receive a verification code.'}
                  </Text>
                </View>
                <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 && props.errors.email}
                  blur={() => props.setFieldTouched('email', true)}
                  returnKeyType="next"
                  onSubmitEditing={() =>
                    passwordRef?.current?.focus()
                  }></RenderTextInput>

                <RenderButton
                  text={'Submit'}
                  textStyle={{color: 'white'}}
                  style={{
                    marginVertical: hp(2),
                    marginHorizontal: hp(2),
                    height: hp(7),
                    width: '90%',
                  }}
                  onPress={props.handleSubmit}></RenderButton>
              </View>
            )}
          </Formik>

功能

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

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

  const handleForgetResponse = data => {
    Alert.alert('fourth')
    ShowToast(data.message, data.status);
    if (data.status == 1) {
      navigation.navigate('Verification', {
        email: data.email,
      });
    }
  };

标签： javascriptreact-native

解决方案

问题在于您使用两种类型的函数实现并忽略了hoistingJavascript 中的概念。

快速修复：
  function forget (values){
    Alert.alert('third')
    const url = 'forgetpassword';
    post(url, values).then(data => 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()    // ---> Cannot access 'arrowFn' before initialization

function regularFn () {
  console.log("regular funciton called")
}

const arrowFn = () => {
  console.log("arrow funciton called")
}

将regularFn()起作用，但arrowFn()会导致错误。

回到您的情况，您forget在定义之前在函数中使用箭头函数。因此您可以在forget函数之前定义它或使用常规函数来解决问题。

推荐阅读