React Native中Fetch调用后Async Storage本地存取值问题解决

核心问题分析 #

你的代码存在三个关键错误导致本地存储失效或读取异常：

1. 存储时的await使用错误：then回调函数未声明为async，直接使用await会抛出语法错误，导致AsyncStorage.setItem无法正确执行。
2. 读取时未处理异步操作：AsyncStorage.getItem返回的是Promise对象，直接赋值后alert显示的是Promise实例（即[Object object]），而非实际存储的值。
3. 键名不匹配：存储时用的键是phone，但读取时写的是telephone，会导致无法读取到手机号数据。

修正后的存储代码（FunctionLogin） #

推荐使用async/await替代then链，代码更简洁易维护：

FunctionLogin = async () => {
  let item = { email, password, phone };
  try {
    // 发送注册请求
    const response = await fetch('https://xxxxxxxxxxxxxxxx/api/sign-up', {
      method: 'POST',
      mode: 'cors',
      headers: {
        Accept: 'application/json',
        'Content-type': 'application/json',
      },
      body: JSON.stringify(item),
    });
    const responseJson = await response.json();

    // 注册成功后存储数据
    if (responseJson.message === 'User created Successfully') {
      await AsyncStorage.setItem('email', email);
      await AsyncStorage.setItem('phone', phone);
      alert('I am Registered');
      navigation.replace('VirtualAccountPage');
    } else {
      alert(responseJson);
    }
  } catch (error) {
    console.error(error);
  }
};

如果坚持保留then链，需给回调函数添加async关键字：

FunctionLogin = async () => {
  let item = { email, password, phone };
  fetch('https://xxxxxxxxxxxxxxxx/api/sign-up', {
    method: 'POST',
    mode: 'cors',
    headers: {
      Accept: 'application/json',
      'Content-type': 'application/json',
    },
    body: JSON.stringify(item),
  })
    .then(response => response.json())
    .then(async (responseJson) => { // 此处添加async
      if (responseJson.message === 'User created Successfully') {
        await AsyncStorage.setItem('email', email);
        await AsyncStorage.setItem('phone', phone);
        alert('I am Registered');
        navigation.replace('VirtualAccountPage');
      } else {
        alert(responseJson);
      }
    })
    .catch(error => {
      console.error(error);
    });
};

修正后的读取代码（FunctionUserDetails） #

必须将函数声明为async，并用await等待Promise解析，同时统一键名：

FunctionUserDetails = async () => {
  try {
    const email = await AsyncStorage.getItem('email');
    const phone = await AsyncStorage.getItem('phone'); // 修正键名，与存储时一致
    alert(email);
    // 如需使用phone，可在此处继续处理
  } catch (error) {
    console.error('读取本地存储失败:', error);
  }
};

额外注意事项 #

• 所有AsyncStorage的操作都是异步的，必须通过await或.then()处理结果，不能直接赋值。
• 跨页面使用存储数据时，确保在页面渲染或操作前等待读取完成，比如在组件的useEffect（Hook组件）或componentDidMount（类组件）中执行读取逻辑。
• 若存储的是复杂对象，需用JSON.stringify转换为字符串存储，读取时用JSON.parse解析。

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