React Native中如何将asyncStorage取出的数据转换为下拉菜单所需格式

问题原因 #

你当前对存储内容执行一次JSON.parse后得到的数组，每个元素仍然是序列化后的JSON字符串，不符合下拉组件要求的对象数组格式，需要对每个元素再做一次序列化解析。

解决方案 #

直接修改你现有的getNames函数，对首次解析后的数组做二次遍历解析即可：

getNames = async () => {
    try {
      const jsonNames = await AsyncStorage.getItem('names')
      if (jsonNames == null) return []
      // 第一次解析得到字符串数组
      const firstParsed = JSON.parse(jsonNames)
      // 遍历数组对每个元素二次解析，得到目标对象数组
      return firstParsed.map(item => JSON.parse(item))
    } catch(e) {
      console.log(e)
      // 异常场景返回空数组，避免组件渲染报错
      return []
    }
}

可选优化方案 #

如果可以调整存储逻辑，建议存数据时直接对完整的对象数组做序列化，后续取用就不需要二次解析：

// 存储数据的优化写法
saveNames = async (namesList) => {
    try {
      // 直接对整个对象数组执行序列化
      await AsyncStorage.setItem('names', JSON.stringify(namesList))
    } catch(e) {
      console.log(e)
    }
}

调整存储逻辑后，你原来的getNames函数不需要修改就能直接得到符合要求的对象数组。

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