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

Question

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

问题来了：我卡在应用程序的最后一步了。我想显示我听过的所有专辑的所有插图。为此，我想为 listened 中的每个元素创建一个 foreach 循环，它会占用它的 URL（现在它只包含 URLs） , 把它放在一个图像标签中， return 它并显示它...但是，我可以这样做吗？

为此，我创建了一个名为 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() 函数，return 是我到达导航时的状态。现在，它只显示所有 URLs:

  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' 具有以下格式

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

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

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

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

Use AsyncStorage values kept in state and display it

javascript

react-native

state

jsx

itunes-store