[Vue warn]:已超出最大递归更新数

vxqlmq5t  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(144)

我得到以下警告,导致当我打开此路由时,组件需要一段时间才能加载,然后菜单仍然存在bug。[Vue warn]:超过了最大递归更新。这意味着您有一个React性效果,它正在改变自己的依赖项,从而递归地触发自己。可能的源包括组件模板,呈现函数,updated hook or watcher source function.我怀疑这可能是因为我们将数据存储在一个store变量中:
下面是我调用store并绘制rangeBar图的前端代码:

<template>
    <q-page>
      <div class="q-pa-md">
        <VueApexCharts
          v-if="!adquisicionStore.loading"
          type="rangeBar"
          height="200" 
          :options="chartOptions" 
          :series="chartSeries"
        />
      </div>
    </q-page>
 </template>

<script setup>
  import VueApexCharts from "vue3-apexcharts";
  import { useAdquisicion } from "../stores/main";
  import { ref, onMounted } from "vue";
  
  const adquisicionStore = useAdquisicion();
  
  const chartSeries = ref([
    {
      name: 'horno1',
      data: [],
    }
  ]);
  
  const chartOptions = {
    plotOptions: {
      bar: {
        horizontal: true,
        barHeight: '20%'
      }
    },
    xaxis: {
      type: 'datetime'
    },
    stroke: {
      width: 1
    },
    fill: {
      type: 'solid',
      opacity: 0.6
    },
    legend: {
      position: 'top',
      horizontalAlign: 'left'
    }
  };  
  
  onMounted(async () => {
    await adquisicionStore.loadHornoMarcha();
    updateChartSeries();
  });
  
  const updateChartSeries = () => {
    // Make sure adquisicionStore.hornoMarcha is an array of data
    chartSeries.value[0].data = adquisicionStore.hornoMarcha;
  }
  </script>

字符串
这就是商店:

import { defineStore } from 'pinia';
import axios from 'axios';

export const useAdquisicion = defineStore('adquisicion', {
  state: () => ({
    hornoMarcha: [],
    loading: true
  }),

  actions: {

      async loadHornoMarcha() {
        try {
          const responseHorMar = await axios.get('http://localhost:3000/horno-marcha');
          if (responseHorMar.status === 200) {
            this.hornoMarcha = responseHorMar.data;
            this.loading = false;
          } else {
            console.error('Error al obtener datos: Respuesta no válida');
          }
        } catch (error) {
          console.error('Error al obtener datos:', error);
        }
      },

  },
  
});


我希望页面能快速加载,打开菜单时不会崩溃。

qacovj5a

qacovj5a1#

问题来自apexcharts插件以及它如何处理数组。解决方案是将toRaw放入:series。以删除React性。

<template>
  <q-page>
    <div class="q-pa-md">
      <VueApexCharts
        type="rangeBar"
        :height="200"
        :options="chartOptions"
        :series="toRaw(chartSeries)"
      />
    </div>
  </q-page>
</template>

<script setup>
import VueApexCharts from 'vue3-apexcharts';
import { useAdquisicion } from "../stores/example-store";
import { ref, onMounted, toRaw } from "vue";

const adquisicionStore = useAdquisicion();

const chartSeries = ref([]); // Ahora es un array vacío para los datos

const chartOptions = {
    plotOptions: {
      bar: {
        horizontal: true,
        barHeight: '20%'
      }
    },
    xaxis: {
      type: 'datetime'
    },
    stroke: {
      width: 1
    },
    fill: {
      type: 'solid',
      opacity: 0.6
    },
    legend: {
      position: 'top',
      horizontalAlign: 'left'
    }
  };

const fetchHornoMarcha = async () => {
  try {
    const response = await adquisicionStore.loadHornoMarcha();
    console.log
    // Asigna los datos a chartSeries
    chartSeries.value = [{
      data: response
    }];
  } catch (error) {
    console.error("Error al cargar datos:", error);
  }
};

onMounted(async () => {
  await fetchHornoMarcha();
});

</script>

<style scoped>
#time-chart {
  width: 100%;
}
</style>

字符串

相关问题