使用AsyncStorage存储user对象时遇“传入null/undefined值不支持”错误

核心原因分析 #

虽然日志显示user对象存在，但报错提示传入undefined，主要是两个问题导致：

1. 未处理异步操作：AsyncStorage.setItem是异步方法，当前代码未用await等待执行完成，边缘场景下可能引发变量状态异常。
2. 序列化结果未校验：极端情况下JSON.stringify(user)可能返回undefined（比如对象包含不可序列化的特殊类型），直接传入会触发错误。

修复方案 #

1. 用async/await重构代码（推荐） #

将axios请求改为async/await语法，让异步流程更清晰，同时给AsyncStorage.setItem加上await：

const onLoginPress = async () => {
  setLoading(true);
  try {
    const response = await axios.post('http://romain.eamuscork.local/api/user/UsersLogin', {
      email: email,
      password: password
    });
    const user = response.data.result;
    if (user) {
      console.log('Utilisateur connecté :', user.name);
      console.log('User :', user);
      // 显式生成序列化字符串并校验
      const userStr = JSON.stringify(user);
      if (userStr) {
        await AsyncStorage.setItem('user', userStr);
      }
      setLoading(false);
      props.onLoginSuccess();
    } else {
      setError('Mauvais identifiant ou mot de passe');
      setLoading(false);
    }
  } catch (error) {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
      setError('Mauvais identifiant ou mot de passe.');
    } else if (error.request) {
      console.log(error.request);
      setError('Une erreur s\'est produite. [Erreur réseau]');
    } else {
      console.log('Error', error.message);
      setError('Une erreur s\'est produite. Veuillez réessayer plus tard.');
    }
    setLoading(false);
  }
}

2. 保留then/catch的修复方式 #

如果不想重构语法，将then回调改为async函数，给setItem加await并增加序列化校验：

const onLoginPress = async () => {
  setLoading(true);

  axios.post('http://romain.eamuscork.local/api/user/UsersLogin', {
    email: email,
    password: password
  })
  .then(async response => { // 改为async函数
    const user = response.data.result;
    if (user) {
      console.log('Utilisateur connecté :', user.name);
      console.log('User :', user);
      const userStr = JSON.stringify(user);
      if(userStr){
        await AsyncStorage.setItem('user', userStr); // 加await
      }
      setLoading(false);
      props.onLoginSuccess();
    } else {
      setError('Mauvais identifiant ou mot de passe');
      setLoading(false);
    }
  })
  .catch(error => {
      if (error.response) {
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
          setError('Mauvais identifiant ou mot de passe.');
          setLoading(false);
      } else if (error.request) {
          console.log(error.request);
          setError('Une erreur s\'est produite. [Erreur réseau]');
          setLoading(false);
      } else {
          console.log('Error', error.message);
          setError('Une erreur s\'est produite. Veuillez réessayer plus tard.');
          setLoading(false);
      }
  });
}

额外校验建议 #

如果问题仍存在，可增加更严格的对象校验：

// 确保user是有效非空对象
if (typeof user === 'object' && user !== null) {
  const userStr = JSON.stringify(user);
  if (typeof userStr === 'string' && userStr.length > 0) {
    await AsyncStorage.setItem('user', userStr);
  }
}

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