时间戳

首页 > 解决方案 > 使用保持状态的 AsyncStorage 值并显示它

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

问题描述

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

所以这是一个问题：我被困在应用程序的最后一步。我想展示我听过的所有专辑的所有艺术作品。为此，我想创建一个 foreach 循环，对于 listened 中的每个元素，它将获取其 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>
    )
  }

感谢您的帮助

标签： javascriptreact-nativestatejsxitunes-store

解决方案

最好将 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 部分也不是必需的，因为它已经是一个字符串。

推荐阅读