从AsyncStorage取值的异步函数返回结果调用map遍历报错如何解决

• async 关键字修饰的函数默认返回Promise对象，直接调用getData()赋值给datas时，datas是Promise实例而非预期的数组，本身不存在map方法，会触发报错。
• 原有代码的catch块无任何返回逻辑，如果AsyncStorage读取失败、JSON解析失败、或者存储的layanan对应值本身不是数组，最终都会返回undefined，undefined调用map也会触发该错误。

React Native 函数组件下的标准修复逻辑如下：

1. 用useState存储读取结果，初始值设置为空数组，从根源避免非数组类型调用map的问题
2. 用useEffect触发异步读取逻辑，异步函数的返回结果要await之后再赋值给状态
3. 补全错误处理逻辑，异常场景下也返回空数组兜底

修改后的逻辑代码示例：

import { useState, useEffect } from 'react'
// 其他组件、样式导入逻辑省略

// 组件内部逻辑
const [datas, setDatas] = useState([])

const getData = async () => {
  try {
    const storageVal = await AsyncStorage.getItem('layanan')
    const listlayana = storageVal ? JSON.parse(storageVal) : []
    // 额外判断类型，避免存储非数组值导致报错
    return Array.isArray(listlayana) ? listlayana : []
  }catch (e){
    // 异常场景兜底返回空数组
    return []
  }
}

useEffect(() => {
  const fetchData = async () => {
    const res = await getData()
    setDatas(res)
  }
  fetchData()
}, [])

渲染部分可增加可选链做兼容，稳妥性更高：

{
  datas?.map((item, i) => (
    <TouchableOpacity key={i}>
      <View style={styles.listitem}>
        <Text style={styles.listtext} >{item.nmlayanan}</Text>
        <Text style={[styles.listtext, {color: "#b4b3b3"}]}> > </Text>
      </View>
    </TouchableOpacity>
  ))
}

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