如何在 React Native 中显示从异步存储接收到的数据？答案

【问题标题】：How do I display data received from Async Storage in React Native?如何在 React Native 中显示从异步存储接收到的数据？
【发布时间】：2022-01-01 02:31:37
【问题描述】：

我正在尝试使用异步存储来显示数据（以数组的形式）。控制台记录数据有效，但是当我将数据置于状态并尝试通过它进行映射以显示时，它不会。欢迎任何帮助。谢谢！控制台日志中的结果：["team1", "team2", "team3"] 在 JSON.parse 之前 Array [ "team1", "team2", "team3", ] 在 JSON.parse 之后

const [favoriteTeams, setFavoriteTeams] = useState([]);

const setStorage = async (team) => {
    let teams = [];
    try {
      let storedTeams = await AsyncStorage.getItem('favTeams');
      if (storedTeams !== null) {
        teams = JSON.parse(storedTeams); 
      }
      teams.push(team)
      await AsyncStorage.setItem('favTeams', JSON.stringify(teams));
    } catch (error) {
      //error
    }
};

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

useEffect(() => {
    getStorage()
}, [])

return (
    <View>
         {favoriteTeams.map((item) => {(
              <Text>{item}</Text> //console.log(item) works
          )}
       )}
    </View>
)

【问题讨论】：

能否请您添加从AsyncStorage.getItem 获得的数据？
["team1", "team2", "team3"] 在 JSON.parse 之前 Array [ "team1", "team2", "team3", ] 在 JSON.parse 之后

标签： javascript arrays reactjs react-native asynchronous

【解决方案1】：

您的map 回调函数没有返回值，这就是没有显示任何内容的原因。

您应该删除大括号或添加显式返回。通过删除大括号，您的箭头函数会隐式返回单个表达式。

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

或者，您可以保留大括号，在这种情况下，您必须显式返回一个值。花括号的优点是你可以在函数体中有多个语句。而没有它们，你只能有一个表达式。

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

详情见：Arrow function expressions - Function body和Arrow function without curly braces

【讨论】：