aws-sdk S3：在 Reactjs 中使用 listObjectsV2 列出所有键

Question

我正在尝试创建特定存储桶中所有文件的列表并将其呈现在 UI 上，我能够将信息记录到控制台，该控制台目前是 8 个数组对象，“Key”是每个文件的名称属性，如下所示：

我遇到的问题是，当我尝试将这些“关键”属性设置为我的状态以便能够映射并在列表中显示它们时，我最终得到了数据运行在控制台中连续循环，我不确定为什么。这是我目前在我的文件中的内容：

如果我尝试将“setListFiles”设置为控制台日志下方的“内容”，这就是连续循环开始发生的地方。如果我做错了一些简单的事情，请原谅我，因为这对我来说仍然是新的，但我真的很感激任何指导，在此先感谢！

Answer 1

我提到的无限循环是由于没有在 useEffect 中调用 s3.listObjects，所以调用了“setListFiles”，重新渲染组件并再次调用 s3.listObjects 循环然后重复因此我得到了无限循环。我对这个文件的最终代码是这样的：

import { useState, useEffect } from 'react';
import AWS from 'aws-sdk';

AWS.config.update({
  accessKeyId: process.env.REACT_APP_ACCESS_ID,
  secretAccessKey: process.env.REACT_APP_ACCESS_KEY,
  region: process.env.REACT_APP_REGION,
});
const s3 = new AWS.S3();

const params = {
  Bucket: 'elixivity-libra-lu001-companyrawdata-dev',
  Delimiter: '',
  Prefix: 'samplecompany/',
};

const BucketList = () => {
  const [listFiles, setListFiles] = useState([]);

  useEffect(() => {
    s3.listObjectsV2(params, (err, data) => {
      if (err) {
        console.log(err, err.stack);
      } else {
        setListFiles(data.Contents);
        console.log(data.Contents);
      }
    });
  }, []);

  return (
    <div className='card'>
      <div className='card-header'>SampleCompany Files</div>
      <ul className='list-group'>
        {listFiles &&
          listFiles.map((name, index) => (
            <li className='list-group-item' key={index}>
              {name.Key}
            </li>
          ))}
      </ul>
    </div>
  );
};

export default BucketList;

aws-sdk S3：在 Reactjs 中使用 listObjectsV2 列出所有键

aws-sdk S3: list all keys with listObjectsV2 in Reactjs

state

amazon-s3

amazon-web-services

reactjs

aws-sdk