"Превышен максимальный размер стека вызовов" путем передачи данных в состояние Vuex

Question

Я получаю данные из MongoDB через отправку GET запросы к моему API. Затем я перебираю response.data и в каждом response.data через его свойства, чтобы подтолкнуть данные, которые мне нужны nextArray, И это nextArray должны быть переданы schedulingQualityСостояние в Vuex. Вот как это выглядит:

methods: {
    ...mapActions(
      ['setSchedulingQuality']
  ),
    get_data() {
    const nextArray = [];
      for(let i in this.SelectedtValues) {
      axios.get('http://127.0.0.1:5000/getexp/'+this.SelectedtValues[i])
    .then(res => {
       for(let n in res.data) {
         nextArray.push(res.data[n].output)
        }
      }
   )}
console.log(nextArray);
      },
computed: {
  ...mapGetters(
    ['schedulingQuality','selectedValues']
  ),
    SelectedtValues() {
    return this.$store.getters.selectedValues;
    } ,
     schedulingQuality() {
    return this.schedulingQuality;
    }
  }

Когда я распечатываю nextArray тогда вроде бы все нормально. Я получаю [] на консоли и после того, как я нажму на нее, правильный контент появляется с небольшим i значок, который говорит: "Value below was evaluated just now". Однако я не могу распечатать элементы этого массива отдельно, каждый из них имеет значение undefinedкогда я попробую это. Но моя главная проблема в том, что Maximum call stack size exceeded ошибка, когда я пытаюсь передать его в свое состояние Vuex в приведенном выше коде перед печатью, например:

this.setSchedulingQuality(nextArray)

Вот мой Vuex-код:

import Vuex from "vuex";
import axios from "axios";
const createStore = () => {
  return new Vuex.Store({
    state: {
      schedulingQuality: [],
    },
    mutations: {
      SchedulingQuality(state, payload) {
        state.schedulingQuality = payload;
      }
    },
    actions: {
      setSchedulingQuality({commit}, payload){
          commit('SchedulingQuality',payload)
      }
    },
    getters: {
      schedulingQuality(state) {
        return state.schedulingQuality;
      }
    }
  });
};

export default createStore;

Мои вопросы:

• Почему невозможно распечатать элементы массива отдельно?
• Почему я получаю эту ошибку
• И как я могу это исправить? Спасибо за ваше время.

Answer 1

axios вызов асинхронный. Во время звонка console.log(nextArray)функция axios еще не завершена. Вот почему вы получили пустой массив.

Вы вызываете несколько API асинхронно, я предлагаю вам проверить Promise.all

get_data() {
    const nextArray = [];
    Promise.all(this.SelectedtValues.map(value => {
        return axios.get('http://127.0.0.1:5000/getexp/' + value)
    })).then(results => {
        results.map(res => {
        for(let n in res.data) {
            nextArray.push(res.data[n].output)
            }
        })
        console.log(nextArray);
    }).catch(err => {
        console.error(err)
    })
}