Блог

Главная - Вопросы по программированию - aws-sdk S3: перечислите все ключи с помощью listObjectsV2 в Reactjs

aws-sdk S3: перечислите все ключи с помощью listObjectsV2 в Reactjs

#reactjs #amazon-web-services #amazon-s3 #state #aws-sdk

#reactjs #amazon-web-services #amazon-s3 #состояние #aws-sdk

Вопрос:

Я пытаюсь создать список всех файлов в определенном сегменте и отобразить его в пользовательском интерфейсе, я могу получить информацию, записанную в консоль, которая в настоящее время представляет собой массив из 8 объектов, причем «Ключ» является свойством имени каждого файла, например:

введите описание изображения здесь

Проблема, с которой я сталкиваюсь, заключается в том, что когда я пытаюсь установить эти свойства «ключа» в свое состояние, чтобы иметь возможность отображать и отображать их в списке, в итоге данные выполняются в непрерывном цикле в консоли, и я не уверен, почему. Это то, что у меня есть до сих пор в моем файле:

введите описание изображения здесь

Если я попытаюсь «Установить список файлов» в «содержимое» под журналом консоли, именно здесь начинается непрерывный цикл. Простите меня, если я делаю что-то простое, что я делаю неправильно, поскольку это все еще ново для меня, но я был бы очень признателен за любые рекомендации, заранее спасибо!

Комментарии:

1. Вы должны опубликовать свой код, а не изображение, чтобы люди могли скопировать / вставить ваш код куда-нибудь для его отладки.

2. Не могли бы вы опубликовать код, в котором ваш вызов listFiles ?

3. Вы правы, учтите в следующий раз, спасибо

4. Я еще не вызывал его, я пытаюсь поместить содержимое в свой массив состояний «setListFiles», который я создал вверху, но когда я это делаю, console.log (contents) входит в почти бесконечный цикл и прерывается

Ответ №1:

Бесконечный цикл, о котором я упоминал, был вызван из-за того, что я не вызывал s3.ListObjects в рамках useEffect, поэтому был вызван «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 amp;amp;
          listFiles.map((name, index) => (
            <li className='list-group-item' key={index}>
              {name.Key}
            </li>
          ))}
      </ul>
    </div>
  );
};

export default BucketList;