使用保持状态的异步存储值并显示它

Question

我正在制作我的第一个应用程序，"标记你听过的专辑"类型的应用程序。我使用了iTunes搜索API，对于每张听的专辑，我都会使用ID和值，使用艺术品的URL创建一个带有AsyncStorage的密钥。

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

为此，我创建了一个称为"侦听">的状态。由于此功能，它需要所有异步存储：

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

谢谢你的帮助

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