javascript - 遍历对象时更新状态值

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

因此，假设您想为每个 file 创建一个 form，您可以使用 map 方法尝试类似的操作。map 方法接受一个数组并根据对前一个数组的引用创建一个新数组:

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 });

这种方法是否适合您的目标？还是您正在尝试不同的东西？