使用保持状态的 AsyncStorage 值并显示它

Posted 2023-02-24

【中文标题】使用保持状态的 AsyncStorage 值并显示它

【英文标题】：Use AsyncStorage values kept in state and display it

【发布时间】：2020-06-29 15:41:54

【问题描述】：

我正在制作我的第一个应用程序，“标记你听过的专辑”类型的应用程序。我使用了 iTunes 搜索 API，对于每张收听的专辑，我使用 AsyncStorage 使用 ID 创建一个密钥，并使用艺术品的 url 作为值。

所以问题来了：我被困在应用程序的最后一步。我想展示我听过的所有专辑的所有艺术作品。为此，我想为 listened 中的每个元素创建一个 foreach 循环，它将获取其 URL（现在它仅包含 URL），将其放入 Image 标签中，返回并显示它...但是，我可以这样做吗？

为此，我创建了一个名为 listened 的状态。由于这个功能，它占用了所有的 AsyncStorage：

  importData = async () => 
    try 
      const keys = await AsyncStorage.getAllKeys();
      const result = await AsyncStorage.multiGet(keys);
      
      console.log(result)
      //listened takes all asyncstorage data
      this.setState(listened: result.map(req => JSON.stringify(req[1])));
     catch (error) 
      console.error(error)
    
  

然后我做了一个 renderArtwork() 函数，当我到达导航时返回状态。目前，它只显示所有 URL：

  renderArtwork()
    this.importData();
    return(
      <Text>this.state.listened</Text>
    )
  

还有“主要”：

  render() 
    return(
      <View style=styles.main_container>
        this.renderArtwork()
      </View>
    )
  

感谢您的帮助

【参考方案1】：

最好将 importData() 移动到您的 componentDidMount 中，该组件将在屏幕安装时调用并从 asyncstorage 获取数据。

至于显示图像，假设您当前的“侦听”数组具有以下格式

  listened = ['url1','url2'];

  renderArtwork() 
    this.importData();
    return this.state.listened.map((url) => (
      <Image
        style=
          width: 50,
          height: 50,
        
        source=
          uri: url,
        
      />
    ));
  

您可以简单地映射并显示数组中的所有图像，而且 JSON.stringify 部分不是必需的，因为它已经是一个字符串。

【讨论】：

非常感谢先生！！