React Native使用Fetch API调用登录接口返回带转义字符文本时导航不生效问题

核心问题列表 #

• this指向错误：跳转逻辑写在了Redux的action层（auth.js属于store层代码），该层不属于任何React组件，this不会指向调用action的组件实例，this.props.navigation实际为undefined，调用跳转逻辑自然不会生效，且该错误发生在fetch的then回调中，若无全局未处理异常捕获配置，大概率不会抛出可见报错。
• 跳转条件不匹配：你描述账号密码错误时接口返回Login Failed，但代码里else if的判断条件是loginresult === 'Login Status'，条件完全不匹配，错误场景自然走不到跳转逻辑。
• 请求头配置错误：请求体传的是FormData格式，但手动设置了Content-Type: application/json，后端会按照JSON格式解析请求体，根本拿不到你传的账号密码参数，接口返回值大概率不符合预期。
• 空白字符替换不彻底：你只替换了固定的换行制表符组合，如果返回值首尾有其他空白字符，全等判断会失败，建议用trim()方法直接去除首尾所有空白字符。
• dispatch位置错误：你把dispatch({type:LOGIN})写在了fetch请求的外层，不管请求成功失败都会先触发dispatch，不符合常规业务逻辑。

修复方案 #

推荐将跳转逻辑移到调用登录action的组件内处理，action层只负责接口请求和状态更新，组件层可以正常拿到navigation属性执行跳转。

修复后的auth.js代码 #

import AsyncStorage from '@react-native-community/async-storage';
import Device from '../../model/Device';

export const LOGIN = 'LOGIN';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILED = 'LOGIN_FAILED';

// 修改action，返回登录结果给调用方
export const login = (textemailid, textpassword) => {
  const formData = new FormData();
  formData.append('txtUemail', textemailid);
  formData.append('txtUpass', textpassword);
  return async dispatch => {
    try {
      const res = await fetch('https:------/login.php', {
        method: 'post',
        // 删掉手动设置的Content-Type，传FormData时框架会自动生成正确的multipart类型
        headers: {
          'Accept': 'application/json',
        },
        body: formData
      });
      const loginr = await res.text();
      // 去除所有首尾空白字符再做判断
      const loginresult = loginr.trim();
      console.log(loginresult);
      
      dispatch({type: LOGIN});
      if (loginresult === 'success') {
        dispatch({type: LOGIN_SUCCESS});
        return 'success';
      } else if (loginresult === 'Login Failed') {
        dispatch({type: LOGIN_FAILED});
        return 'failed';
      }
      return 'other';
    } catch (err) {
      console.log(err);
      dispatch({type: LOGIN_FAILED});
      return 'error';
    }
  }
}

组件内调用示例 #

// 登录按钮提交逻辑，组件内可以正常获取navigation属性
const handleSubmit = async () => {
  const loginRes = await dispatch(login(inputEmail, inputPassword));
  if (loginRes === 'success') {
    navigation.navigate('Home');
  } else {
    navigation.navigate('Auth');
  }
}

内容的提问来源于stack exchange，提问作者Poornima Gurudath