React Native中JSON.stringify存对象到AsyncStorage出现损坏如何解决

问题原因 #

你存储数据的逻辑本身没有问题，出错是在取数后的处理环节：
AsyncStorage的getItem接口返回的是你之前存入的序列化JSON字符串，你没有先调用JSON.parse()将字符串还原为原始对象，反而直接对字符串执行了对象展开、转对象等操作。字符串本身是类数组结构，被强制转为普通对象后，就会生成你看到的以字符下标为key、单个字符为value的结构。

修复方案 #

取数时先等待异步返回完成，再对拿到的字符串做JSON反序列化即可，示例代码如下：

const fetchOnboardingData = async () => {
  // 等待异步取数完成，拿到序列化字符串
  const storedStr = await AsyncStorage.getItem('@onboardingModel');
  // 空值判断避免parse报错
  if (!storedStr) return null;
  // 反序列化为原始对象
  const onboardingModel = JSON.parse(storedStr);
  // 可正常读取email字段
  console.log(onboardingModel.email); // 输出 Client@monroinsights.co
  return onboardingModel;
}

额外注意事项 #

• 调用getItem时必须加await，否则拿到的是Promise对象而非存储的字符串，也会导致处理异常
• 所有通过JSON.stringify序列化后存入AsyncStorage的内容，取出后必须先执行JSON.parse再做后续处理

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