Javascript 使用保存在状态中的异步存储值并显示它

我正在制作我的第一个应用程序，“标记你听过的专辑”之类的应用程序。我使用iTunes搜索API，对于每一张听过的专辑，我都使用ID创建一个带有异步存储的键，并为值创建一个指向艺术品的url

所以问题是：我被困在应用程序的最后一步。我想展示我听过的所有专辑的所有艺术作品。为此，我想做一个foreach循环，对于侦听的每个元素，它将获取其URL（现在它只包含URL），将其放入图像标记中，返回并显示它。。。但是，我能做到吗

为此，我创建了一个名为“倾听”的状态。由于此功能，它占用了所有异步存储空间：

  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>
    )
  }

renderwork（）{
这个.importData（）；
返回(
{this.state.listed}
)
}

和“主要的”：

render（）{
返回(
{this.renderArtwork（）}
)
}

---

感谢您的帮助

最好将importData（）移动到您的componentDidMount，它将在安装屏幕时调用并从异步存储中获取数据

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

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

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

listened=['url1'，'url2']；
渲染网络（）{
这个.importData（）；
返回此.state.listened.map（（url）=>(
));
}

---

您只需映射并显示阵列中的所有图像，也不需要JSON.stringify部分，因为它已经是一个字符串。

非常感谢您，先生！！

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

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