«Превышен максимальный размер стека вызовов» путем передачи данных в состояние 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)
    })
}