Vuex传递数据遇栈溢出错误及数组打印异常问题排查

Hey there, let's break down your issues one by one and fix them up!

1. Why can't you print individual array items? #

The root cause here is asynchronous behavior. When you call console.log(nextArray), all your axios.get requests are still in progress—they haven't finished fetching data yet. So nextArray is truly empty at that moment.

Browsers have a handy (but sometimes confusing) console feature: it shows a reference to the array instead of the immediate value. When you click to expand the array later, the console re-evaluates the reference, and by then your requests have completed, so you see the correct data. But if you try to print an individual item like nextArray[0] right after initiating the requests, that item doesn't exist yet, hence undefined.

2. Why the "Maximum call stack size exceeded" error? #

Look at this computed property in your component:

schedulingQuality() { return this.schedulingQuality; }

You've created an infinite recursion here! The computed property is named schedulingQuality, and its getter tries to return this.schedulingQuality—which is itself. Every time you access this property, it triggers the getter, which tries to access the property again, looping forever until the call stack runs out of space.

To make it worse, you already imported the same getter via ...mapGetters(['schedulingQuality']), so this duplicate definition is completely unnecessary.

3. How to fix these issues? #

Let's tackle both problems with targeted fixes:

Fix the asynchronous data collection #

Since you're making multiple API calls, we need to wait for all of them to finish before working with nextArray. Use Promise.all() combined with async/await to handle this properly:

methods: {
  ...mapActions(['setSchedulingQuality']),
  async get_data() {
    const nextArray = [];
    // Collect all API request promises first
    const requestPromises = this.SelectedtValues.map(value => {
      return axios.get(`http://127.0.0.1:5000/getexp/${value}`)
        .then(res => {
          // Push all output values from this request into nextArray
          res.data.forEach(item => nextArray.push(item.output));
        });
    });

    // Wait for every request to complete
    await Promise.all(requestPromises);

    console.log(nextArray); // Now this will log the full, populated array
    this.setSchedulingQuality(nextArray); // Update Vuex state safely
  }
}

This ensures we only process nextArray and update Vuex after all data has been fetched.

Remove the recursive computed property #

Delete the duplicate schedulingQuality computed property. Your computed section should look like this:

computed: {
  ...mapGetters(['schedulingQuality','selectedValues']),
  SelectedtValues() {
    return this.$store.getters.selectedValues;
  }
}

The ...mapGetters line already brings in the Vuex getter for schedulingQuality, so you don't need to redefine it. This eliminates the infinite recursion causing the stack overflow.

A quick side note: you might want to fix the typo in SelectedtValues (extra 't') for consistency, but that's just a minor cleanup.

内容的提问来源于stack exchange，提问作者Subhan Asadli