时间戳

首页 > 解决方案 > 反应从 S3 Bucket 中检索多个图像的正确方法

javascript - 反应从 S3 Bucket 中检索多个图像的正确方法

问题描述

我有一个对象数组，其中的一些项目有一个“徽标”对象，其中包含存储在 S3 存储桶上的图像键。 在此处输入图像描述

这是一个可选字段，因此有时它在对象中不存在。为了检索图像，我使用了 AWS-Amplify 的 Storage api。这个存储函数给我一个承诺，这是我的第一个问题。

const fetchUsers = async () => {
  setLoading(true);
  const formatedData = [];
  const { data } = await API.graphql(graphqlOperation(listUsers));
  console.log({ data });
  data.listUsers.items.map(async user => {
    if (user.logo) {
      console.log(Storage.get());
      const image = await Storage.get(user.logo.key);
      user.image = image;
      formatedData.push(user);
    } else {
      formatedData.push(user);
    }
  })
}

当我等待 Storage.get 函数的响应时，循环继续运行，它正在修改来自数据数组的原始排序。这导致所有具有图像的条目最后出现在数组上。因此，鉴于此，我假设

  1. 有一种方法可以防止循环在我仍在等待响应时运行
  2. 有一种更好/更有效的方法可以从 S3 获取这些图像。

任何想法如何使它运行更顺畅？

标签： javascriptarraysreactjsamazon-s3aws-amplify

解决方案

推荐阅读