React Native AsyncStorage读取出现多余反斜杠无法正常取值问题
反斜杠出现原因及问题说明
- 关于
persist:root前缀:你的判断完全正确,这是redux-persist默认使用的根存储key。redux-persist默认不会将Redux store中的每个字段拆分为AsyncStorage的独立键,而是将整个store序列化后统一存储在persist:root这一个键下,这也是你直接调用await AsyncStorage.getItem("isLoggedIn")读不到值的根本原因——isLoggedIn不是AsyncStorage的一级存储键,是存在persist:root对应值内的嵌套字段。 - 关于反斜杠
\:这不是异常字符,是JSON序列化时的标准转义字符,来源是redux-persist的双层序列化逻辑:- 第一层:redux-persist会先对每个独立reducer的state执行
JSON.stringify()转成字符串,字符串内部的双引号会被自动加上\转义,比如{isLoggedIn: true}转成字符串后就会变成"{\"isLoggedIn\":true}" - 第二层:所有reducer序列化完成后,redux-persist会将这些字符串拼接为一个整体对象,再对这个大对象执行一次
JSON.stringify()存入AsyncStorage
- 第一层:redux-persist会先对每个独立reducer的state执行
- 你打印结果中看到的
"和额外的转义符,是错误的打印方式导致的:AsyncStorage.multiGet()返回的是[[key1, value1], [key2, value2]]格式的二维数组,直接对二维数组调用toString()会强制用逗号拼接所有数组元素,同时对特殊字符做转义处理,无法反映存储的真实内容。
正确读取目标字段的方法
不要直接用字段名作为key读AsyncStorage,需要先读取persist:root的内容,经过两次JSON解析就能拿到完整的Redux state:
// 读取redux-persist存储的根数据 const persistRootValue = await AsyncStorage.getItem('persist:root'); // 第一次解析,拿到包含各reducer序列化结果的对象 const persistRootObj = JSON.parse(persistRootValue); // 第二次解析对应reducer的内容,拿到实际业务state const usersReducerState = JSON.parse(persistRootObj.usersReducer); // 此时可以正常读取目标字段 const isLoggedIn = usersReducerState.isLoggedIn; const token = usersReducerState.token;
如果需要打印AsyncStorage全量数据排查问题,不要用toString(),改用结构化打印:
const keys = await AsyncStorage.getAllKeys(); const result = await AsyncStorage.multiGet(keys); // 结构化打印,能看到清晰的键值结构,不会出现多余转义 console.log(JSON.stringify(result, null, 2));
内容的提问来源于stack exchange,提问作者Hyejung
相关产品推荐
相关产品推荐

