Выполнение одноразового вызова API путем удаления функции карты

Question

Я новичок в ReactJ и испытываю трудности с пониманием изменений ниже. Когда форма отправлена, приведенный ниже код вызывает API, основываясь на количестве представленных элементов.

Я решил не использовать функцию карты, но с помощью одного вызова, удалив карту.

submitForm() {
  // Remove map from below and make it as a single call instead multiple calls to API
  const bucketsInfo = formState.formData.step1.variants.map((item, i) => {
    const formBody = {
      buckets: [],
      control: formState.formData.step2.controlOptions
    };
    formState.formData.step2.variants.forEach((items, j) => {
      formBody.buckets.push({
        crossDomainSiteId: formState.formData.step2.variants[j].siteID.value,
      });
    });
    return axios.post("/guinness_api/experiments/experiment", formBody);
  });
}

Может кто-нибудь подсказать мне, что здесь лучше всего сделать?

Answer 1

Ну, ваш код все еще немного запутан, и у вас есть цикл внутри цикла, который кажется здесь немного ненужным.

Если я правильно понял, что вам здесь нужно, рефакторированный пример будет:

submitForm() {
    const { step2 } = formState.formData;
    const step2Variants = step2.variants;

    // Map already returns each variant, no need to foreach it with index
    const buckets = step2Variants.map(variant => ({
      crossDomainSiteId: variant.siteID.value
    }));

    /** Creates formbody object from buckets populated with map, 
     *    and takes control options from step 2 
     */
    const formBody = {
      buckets,
      control: step2.controlOptions
    };

    return axios.post('/guinness_api/experiments/experiment', formBody);
}