React Native中jwtDecode调用报错：_jwtDecode.default不是函数

算力阿峰

2026-7-1

解决React Native中jwtDecode不是函数的Promise拒绝错误

核心问题分析

你遇到的Possible unhandled promise rejection TypeError:0,_jwtDecode.default is not a function错误，主要由两个原因导致：

jwt-decode版本更新后导出方式变更，你的导入方式与当前版本不匹配；
未对jwtDecode调用添加错误捕获，token为空/无效时直接抛出错误中断代码执行，导致reached third无法打印。

具体解决方案

1. 匹配`jwt-decode`版本调整导入方式

jwt-decode在v4.x版本后修改了导出方式：

v3.x及以下版本：默认导出函数，使用：
```
import jwtDecode from 'jwt-decode';
```
v4.x及以上版本：仅支持命名导出，必须使用：
```
import { jwtDecode } from 'jwt-decode';
```

你可以查看package.json中的jwt-decode版本号，或者执行命令npm list jwt-decode确认版本，再对应调整导入代码。

2. 添加完整错误捕获与token校验

修改fetchUsers函数，增加token非空校验和try/catch块，避免未处理的Promise拒绝，同时定位具体错误：

const fetchUsers = async () => {
  try {
    const token = await AsyncStorage.getItem('authToken');
    
    console.log('Token:', token);
    console.log('reached second');

    // 先校验token是否存在
    if (!token) {
      console.log('Error: authToken不存在');
      return;
    }

    const decodedToken = jwtDecode(token);

    console.log('reached third');

    const userId = decodedToken.userId;
    setUserId(userId);
    console.log('reached here');
    console.log('Fetching users...');
    
    // 建议把axios的then/catch改为await+try/catch，保持代码风格统一
    const response = await axios.get(`http://localhost:8000/users/${userId}`);
    setUsers(response.data);
  } catch (error) {
    // 打印完整错误信息，方便定位
    console.log('处理流程出错:', error);
  }
};