React Native中如何展示从Async Storage获取的数组数据？

核心问题：map回调未返回JSX元素 #

你当前的map方法回调函数使用了花括号包裹逻辑，但没有显式return要渲染的<Text>组件，导致最终返回undefined，所以页面没有渲染内容。同时你的状态更新逻辑存在重复追加数据的隐患，可同步优化。

修正方案 #

1. 修正渲染部分的map写法 #

有两种合法写法可选：

• 隐式返回（去掉花括号，直接用圆括号包裹JSX）：

return (
    <View>
         {favoriteTeams.map((item, index) => (
              <Text key={index}>{item}</Text>
          ))}
    </View>
)

• 显式返回（保留花括号，添加return语句）：

return (
    <View>
         {favoriteTeams.map((item, index) => {
              console.log(item) // 调试日志可正常执行
              return <Text key={index}>{item}</Text>
          })}
    </View>
)

注意：map渲染列表需要为每个子元素添加唯一key属性，避免React渲染警告。

2. 优化getStorage的状态更新逻辑 #

你当前的写法是在原有state基础上拼接新读取的存储数据，组件重复挂载时会出现数据重复的问题，建议直接覆盖赋值：

const getStorage = async () => {
    const teams = await AsyncStorage.getItem('favTeams')
    if (teams !== null) {
        setFavoriteTeams(JSON.parse(teams))
    }
}

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