Async Storage解析后对象字段返回undefined问题求助

从Async Storage取出内容解析为对象后，访问对象中的user、token字段返回undefined，但console.log(a)却能显示包含这些字段的JSON结构。

代码示例 #

const storage: any = await AsyncStorage.getItem('persist:root');

const state = JSON.parse(storage!);
console.log(state);

const a = JSON.parse(JSON.stringify(state.auth));
console.log(a); // 显示包含"user"和"token"字段的正常JSON
console.log(a.user); // undefined
console.log(a.token); // undefined

const refreshToken = a.token.refreshToken; // undefined

state.auth的预期结构 #

{
  "user":{},
  "token":{
    "refreshToken":"REFRESH",
    "accessToken":"ACCESS"
  }
}

日志输出 #

LOG {"_persist": "{"version":-1,"rehydrated":true}", "auth":
"{"user":{"user_id":19,"email":"user19@mail.ru","approved":false,"createdAt":"2024-01-11T07:42:33.762Z","updatedAt":"2024-01-11T07:42:33.762Z","role":{"role_id":1,"role_name":"Пользователь","createdAt":"2024-01-10T12:42:21.257Z","updatedAt":"2024-01-10T12:42:21.257Z"},"organization":{"organization_id":3,"organization_type_id":1,"organization_name":"ООО
"Компания 4"","full_name":"ООО "Компания
4"","short_name":"Компания
4","register_number":"212122134","bic":"251490211","phone":"+79354944154","address":"883072,
Курганская область, город Чехов, спуск Будапештсткая,
77","email":"company4@mail.com","ogrn":"6927890723831","inn":"0436981520","kpp":"183212273","okpo":"50235599","createdAt":"2024-01-10T12:42:23.354Z","updatedAt":"2024-01-10T12:42:23.354Z"},"person":{"person_id":19,"last_name":"Ivanov","first_name":"Ivan","patronymic":"Ivanovi3","gender":"Мужской","phone":"+79001234568","createdAt":"2024-01-11T07:42:33.760Z","updatedAt":"2024-01-11T07:42:33.760Z"},"group":null},"token":{"refreshToken":"REFRESH","accessToken":"ACCESS"}}"}
LOG
{"user":{"user_id":19,"email":"user19@mail.ru","approved":false,"createdAt":"2024-01-11T07:42:33.762Z","updatedAt":"2024-01-11T07:42:33.762Z","role":{"role_id":1,"role_name":"Пользователь","createdAt":"2024-01-10T12:42:21.257Z","updatedAt":"2024-01-10T12:42:21.257Z"},"organization":{"organization_id":3,"organization_type_id":1,"organization_name":"ООО
"Компания 4"","full_name":"ООО "Компания
4"","short_name":"Компания
4","register_number":"212122134","bic":"251490211","phone":"+79354944154","address":"883072,
Курганская область, город Чехов, спуск Будапештсткая,
77","email":"company4@mail.com","ogrn":"6927890723831","inn":"0436981520","kpp":"183212273","okpo":"50235599","createdAt":"2024-01-10T12:42:23.354Z","updatedAt":"2024-01-10T12:42:23.354Z"},"person":{"person_id":19,"last_name":"Ivanov","first_name":"Ivan","patronymic":"Ivanovi3","gender":"Мужской","phone":"+79001234568","createdAt":"2024-01-11T07:42:33.760Z","updatedAt":"2024-01-11T07:42:33.760Z"},"group":null},"token":{"refreshToken":"REFRESH","accessToken":"ACCESS"}}
LOG undefined LOG undefined

问题原因 #

从日志可见，state.auth本身就是JSON格式的字符串（被双引号包裹），但你处理时多做了一步JSON.stringify(state.auth)——这会把原本的JSON字符串再次转义成带引号的字符串，之后JSON.parse得到的结果依然是字符串而非对象。

虽然console.log(a)会把字符串格式的JSON渲染成对象样式，但本质上a是字符串，自然无法通过.访问对象属性，因此返回undefined。

解决方案 #

直接解析state.auth即可，无需多余的JSON.stringify步骤：

const storage: any = await AsyncStorage.getItem('persist:root');

const state = JSON.parse(storage!);
console.log(state);

// 直接解析state.auth，无需先stringify
const a = JSON.parse(state.auth);
console.log(a.user); // 正常输出user对象
console.log(a.token); // 正常输出token对象

const refreshToken = a.token.refreshToken; // 正常获取REFRESH

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