Обновить значение состояния при цикле через объект

Question

У меня есть следующий объект с этими атрибутами:

Мне нужно зациклить мой фрагмент кода так, чтобы с каждым циклом переменная arrayPosition будет увеличиваться, и значение file[arrayPosition].file также изменится, основываясь на arrayPosition. Значение this.state.videoSource также будет динамически изменяться, так как оно основано на file[arrayPosition].file.

. Вот мой код прямо сейчас:

const response = await dataProvider(GET_MANY, 'vid', { ids: videoId })
const file = response.data;
var arrayPosition = 0;

var sigkey = "key";
var formBody = new FormData();
formBody.set('ver', "1.2");
formBody.set('key', "key");
formBody.set('video_id', file[arrayPosition].file);
formBody.set('user_id', "1234");
formBody.set('format', "json");
formBody.set('ip', "");
formBody.set('tts', "0");
formBody.set('nonce', Math.round((new Date()).getTime() / 1000));

var sign_fields = [formBody.get('video_id'), formBody.get('user_id'), formBody.get('ip'), formBody.get('tts'), formBody.get('ver'), formBody.get('key'), formBody.get('nonce')];
var data = sign_fields.join(':');
var signature = hmacsha256(data, sigkey);

formBody.set('sig', signature);

var formBodyStringified = new URLSearchParams(formBody).toString();

 const resJson = await fetch(Config.api.livebox, {
       method: 'POST',
       body: formBodyStringified,
       headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
       }
   }).then(res => res.json());
   const finalJsonUrl = 'https:' + resJson.hls;
   this.setState({ videoSource: finalJsonUrl });
   arrayPosition++;

Любые предложения, как это зациклитьпример кода, чтобы значение file[arrayPosition].file изменилось в зависимости от значения arrayPosition?

Если что-то неясно, просто спросите. Заранее спасибо.

Answer 1

Итак, исходя из предположения, что вы хотите создать form для каждого file, вы можете попробовать что-то подобное с методом map. Метод map берет массив и создает new array на основе ссылки на предыдущий массив:

const response = await dataProvider(GET_MANY, 'vid', { ids: videoId })
const file = response.data;
var arrayPosition = 0;

let formPerFile = file.map( f => {

  var sigkey = "key";
  var formBody = new FormData();
  formBody.set('ver', "1.2");
  formBody.set('key', "key");
  // HEre instead of use the reference of file wth the arrayIndex we just can use the f variable provided by our iterator 
  formBody.set('video_id', f.file);
  formBody.set('user_id', "1234");
  formBody.set('format', "json");
  formBody.set('ip', "");
  formBody.set('tts', "0");
  formBody.set('nonce', Math.round((new Date()).getTime() / 1000));

  var sign_fields = [formBody.get('video_id'), formBody.get('user_id'),  formBody.get('ip'), formBody.get('tts'), formBody.get('ver'), formBody.get('key'), formBody.get('nonce')];
  var data = sign_fields.join(':');
  var signature = hmacsha256(data, sigkey);

  formBody.set('sig', signature);

  var formBodyStringified = new URLSearchParams(formBody).toString();

// YOu need to make this request per file? 
// Or you have a service taht can `post` all the forms from one request?
  const resJson = await fetch(Config.api.livebox, {
       method: 'POST',
       body: formBodyStringified,
       headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
       }
   }).then(res => res.json());

   return 'https:' + resJson.hls;

} );

  // Here you can store the video sources returned from the map method in your state instead of storing just one value
   this.setState({ videoSource: formsPerFile });

Является ли этот подход правильным для вашей цели? или вы пытаетесь что-то другое?