如何解决AsyncStorage getItem数据含多余反斜杠、删除时JSON解析报错的问题

错误原因 #

• 你当前的数据中，数组内的元素本身就是已经序列化完成的合法JSON字符串，你额外对整个数组执行JSON.stringify相当于做了二次转义，导致字符串中出现多层转义反斜杠
• 你直接全局删除所有反斜杠的操作会破坏JSON的原有结构：原本用于转义引号的反斜杠被删除后，JSON字符串会提前闭合，出现语法错误，就是你遇到的Unexpected token { in JSON at position 3报错
• 多余反斜杠的根源是你存入AsyncStorage时做了重复序列化：比如已经将对象转为JSON字符串后，又对这个字符串再次执行JSON.stringify才存入，就会产生多余的转义反斜杠

解决方法 #

现有数据的正确处理代码 #

不需要全局删除反斜杠，直接解析数组内的JSON字符串即可：

const data = ["{\"word\":\"Cat\",\"pronunciation\":null,\"definitions\":[{\"type\":\"noun\",\"definition\":\"a small domesticated carnivorous mammal with soft fur, a short snout, and retractile claws. It is widely kept as a pet or for catching mice, and many breeds have been developed.\",\"example\":\"their pet cat\",\"image_url\":\"https://media.owlbot.info/dictionary/images/aaaaaaaaaaaaaaaaac.jpg.400x400_q85_box-42,0,943,900_crop_detail.jpg\",\"emoji\":\"🐈\"}]}"]
// 单条数据直接解析
const parsedData = JSON.parse(data[0])
console.log(parsedData)
// 数组内有多条数据时遍历解析
const finalData = data.map(item => JSON.parse(item))

根源避免方案 #

存入AsyncStorage时只做一次序列化：

1. 存入前：仅将需要存储的对象执行一次JSON.stringify转为字符串后存入
2. 取出后：直接对取出的字符串执行一次JSON.parse即可得到原始数据，不需要额外的转义字符处理

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