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

Question

我正在尝试使用异步存储显示数据（以数组的形式）。 控制台记录数据有效，但是当我将数据放入 state 并尝试通过它显示 map 时，它不会。 欢迎任何帮助。 谢谢：控制台日志中的结果： ["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>
)

Answer 1

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

您应该删除大括号。 通过删除大括号，您的箭头 function 隐式返回单个表达式。

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

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

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

有关详细信息，请参阅： 箭头 function 表达式 - Function 正文和箭头 function 不带花括号