axios RangeError：Maximum call stack size exceeded and [Vue warn]：v-on处理程序出错：“范围错误：超出最大调用堆栈大小”

我正在创建一个简单的学生系统，它允许我查看学生列表，一些学生的详细信息，并且在组件“StudentDetails”中，我单击一个按钮将我重定向到另一个组件。这是我的代码：
Vue工艺路线：

import Vue from "vue";
import VueRouter from "vue-router";
import StudentList from "@/components/ListaAlunos.vue";
import HomeComp from "@/views/HomeComp.vue";
import AdicionarNota from "@/views/AdicionarNota.vue";
import DetalhesEstudante from "@/components/StudentCard.vue";
import AdicionarAluno from "@/views/StudentRegister.vue";
Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeComp,
    },
    {
      path: "/student-list",
      name: "studentList",
      component: StudentList,
    },
    {
      path: "/estudantes/:id",
      name: "detalhesEstudante",
      component: DetalhesEstudante,
    },
    {
      path: "/detalhes-estudante-nota/:id",
      name: "adicionarNota",
      component: AdicionarNota,
      props: true,
    },
    {
      path: "/student-register",
      name: "AdicionarAluno",
      component: AdicionarAluno,
    },
  ],
});

学生列表组件：

<template>
  <div>
    <ul>
      <li v-for="estudante in estudantes" :key="estudante.id">
        <q-btn square color="grey"
          ><router-link
            :to="{ name: 'detalhesEstudante', params: { id: estudante.id } }"
            >{{ estudante.nome }}</router-link
          >
        </q-btn>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";

export default {
  computed: {
    ...mapGetters(["estudantes"]),
    ...mapState(["estudantes"]),
  },
  async created() {
    await this.$store.dispatch("buscarEstudantes");
  },
};
</script>

学生卡（学生详细信息）组件：

<template>
  <div>
    <div v-if="estudanteAtual">
      <h1>{{ estudanteAtual.nome }}</h1>
      <p>Média: {{ media }}</p>
      <p>Maior Nota: {{ maiorNota }}</p>
      <p>Menor Nota: {{ menorNota }}</p>
      <p>Quantidade de Provas: {{ quantidadeProvas }}</p>
      <q-btn>
        <router-link
          :to="{
            name: 'adicionarNota',
            params: { id: estudanteAtual.id },
          }"
        >
          Adicionar nota para {{ estudanteAtual.nome }}
        </router-link>
      </q-btn>
    </div>
    <div v-else>Carregando estudante...</div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  computed: {
    ...mapState([
      "estudanteAtual",
      "media",
      "maiorNota",
      "menorNota",
      "quantidadeProvas",
    ]),
  },
  methods: {
    ...mapActions(["buscarEstudantePorId", "buscarQuantidadeProvas"]),
    async buscarEstudante(id) {
      await this.buscarEstudantePorId(id);
      await this.buscarQuantidadeProvas(id);
    },
  },
  mounted() {
    this.buscarEstudantePorId(this.$route.params.id);
  },
};
</script>

AdicionarNota（addMark组件）：

<template>
  <div>
    <h1>Adicionar Nota</h1>
    <form @submit.prevent="adicionarNota">
      <label>
        Nota:
        <input type="number" v-model="nota" required />
      </label>
      <button type="submit">Adicionar</button>
    </form>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  props: {
    id: {
      type: [Number, String],
      required: true,
      validator: (value) => {
        const num = Number(value);
        return !isNaN(num) && typeof num === "number";
      },
    },
  },
  data() {
    return {
      nota: null,
    };
  },
  methods: {
    ...mapActions(["adicionarNota"]),
    adicionarNota() {
      this.adicionarNota({
        id: this.id,
        nota: this.nota,
      });
    },
  },
};
</script>

Axios服务：

import axios from "axios";

const API_URL = "http://localhost:8080/estudantes";

class EstudanteService {
  // Criar um estudante
  criarEstudante(estudante) {
    return axios.post(API_URL, estudante);
  }

  // Atualizar um estudante
  atualizarEstudante(id, dadosEstudante) {
    return axios.put(`${API_URL}/${id}`, dadosEstudante);
  }

  // Deletar um estudante
  deletarEstudante(id) {
    return axios.delete(`${API_URL}/${id}`);
  }

  // Buscar todos os estudantes
  buscarEstudantes() {
    return axios.get(API_URL);
  }

  // Buscar estudante por ID
  buscarEstudantePorId(id) {
    return axios.get(`${API_URL}/${id}`);
  }

  // Calcular Média
  calcularMedia(id) {
    return axios.get(`${API_URL}/${id}/media`);
  }

  // Adicionar Nota
  adicionarNota(id, nota) {
    return axios.post(`${API_URL}/${id}/${nota}`);
  }

  // Obter Maior Nota
  obterMaiorNota(id) {
    return axios.get(`${API_URL}/${id}/maior`);
  }

  // Obter Menor Nota
  obterMenorNota(id) {
    return axios.get(`${API_URL}/${id}/menor`);
  }

  // Obter número de notas
  obterNumeroNotas(id) {
    return axios.get(`${API_URL}/${id}/numero-notas`);
  }
}

export default new EstudanteService();

Vuex：

import EstudanteService from "../services/StudentService.js";
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    estudantes: [],
    estudanteAtual: null,
    notas: [],
    media: null,
    maiorNota: null,
    menorNota: null,
    quantidadeNotas: null,
  },
  mutations: {
    SET_ESTUDANTES(state, estudantes) {
      state.estudantes = estudantes;
    },
    SET_ESTUDANTE_ATUAL(state, estudante) {
      state.estudanteAtual = estudante;
      state.media = estudante.media;
      state.maiorNota = estudante.maiorNota;
      state.menorNota = estudante.menorNota;
      state.quantidadeNotas = estudante.notas.length;
      console.log(estudante);
    },
    SET_ESTUDANTE_NOME(state, nome) {
      state.estudanteAtual.nome = nome;
    },
    SET_QUANTIDADE_PROVAS(state, quantidadeProvas) {
      state.quantidadeProvas = quantidadeProvas;
    },
    SET_MEDIA(state, media) {
      state.media = media;
    },
    SET_MAIOR_NOTA(state, maiorNota) {
      state.maiorNota = maiorNota;
    },
    SET_MENOR_NOTA(state, menorNota) {
      state.menorNota = menorNota;
    },
    SET_NOTAS(state, notas) {
      state.notas = notas;
    },
  },

  actions: {
    async buscarMediaMaioresMenoresNotas({ commit, state }) {
      const notas = state.notas;
      const quantidadeProvas = notas.length;
      const somaNotas = notas.reduce((total, nota) => total + nota, 0);
      const media = quantidadeProvas > 0 ? somaNotas / quantidadeProvas : null;
      const maiorNota = quantidadeProvas > 0 ? Math.max(...notas) : null;
      const menorNota = quantidadeProvas > 0 ? Math.min(...notas) : null;
      await commit("SET_MEDIA", media);
      await commit("SET_MENOR_NOTA", menorNota);
      await commit("SET_MAIOR_NOTA", maiorNota);
      await commit("SET_NOTAS)", notas);
      await commit("SET_QUANTIDADE_PROVAS", quantidadeProvas);
    },
    async buscarEstudantePorNome({ commit, dispatch }, nome) {
      const response = await EstudanteService.buscarEstudantePorNome(nome);
      await commit("SET_ESTUDANTE_ATUAL", response.data);
      await commit("RESET_MEDIA_MAIORES_MENORES_NOTAS");
      if (response.data) {
        const id = response.data.id;
        await dispatch("buscarNotas", id);
        await dispatch("buscarMediaMaioresMenoresNotas");
      }
    },
    async criarEstudante({ commit }, estudante) {
      await EstudanteService.criarEstudante(estudante);
      await commit("SET_ESTUDANTE_ATUAL", estudante);
    },

    async atualizarEstudante({ commit }, estudante) {
      await EstudanteService.atualizarEstudante(estudante.id, estudante);
      await commit("SET_ESTUDANTE_ATUAL", estudante);
    },

    async deletarEstudante({ commit }, estudante) {
      await EstudanteService.deletarEstudante(estudante.id);
      await commit("SET_ESTUDANTE_ATUAL", null);
    },

    async buscarEstudantes({ commit }) {
      const response = await EstudanteService.buscarEstudantes();
      await commit("SET_ESTUDANTES", response.data);
    },

    async buscarEstudantePorId({ commit }, id) {
      const response = await EstudanteService.buscarEstudantePorId(id);
      await commit("SET_ESTUDANTE_ATUAL", response.data);
    },

    async calcularMedia({ commit }, id) {
      const response = await EstudanteService.calcularMedia(id);
      await commit("SET_MEDIA", response.data);
    },

    async adicionarNota({ commit }, { id, nota }) {
      await EstudanteService.adicionarNota(id, nota);
      const response = await EstudanteService.obterNumeroNotas(id);
      await commit("SET_QUANTIDADE_PROVAS", response.data);
      const anotherResponse = await EstudanteService.buscarNotas(id);
      await commit("SET_NOTAS", anotherResponse.data);
    },

    async obterMaiorNota({ commit }, id) {
      const response = await EstudanteService.obterMaiorNota(id);
      await commit("SET_MAIOR_NOTA", response.data);
    },

    async obterMenorNota({ commit }, id) {
      const response = await EstudanteService.obterMenorNota(id);
      await commit("SET_MENOR_NOTA", response.data);
    },
    async buscarQuantidadeProvas({ commit }, id) {
      const response = await EstudanteService.obterNumeroNotas(id);
      await commit("SET_QUANTIDADE_PROVAS", response.data);
    },
    async buscarNotas({ commit }, id) {
      const response = await EstudanteService.buscarNotas(id);
      await commit("SET_NOTAS", response.data);
      await commit("SET_MAIOR_NOTA", Math.max(...response.data));
      await commit("SET_MENOR_NOTA", Math.min(...response.data));
    },
  },
});

谁能帮我解决这个堆栈错误并创建AddStudent组件？

axios RangeError：Maximum call stack size exceeded and [Vue warn]：v-on处理程序出错：“范围错误：超出最大调用堆栈大小”

1条答案

相关问题

热门标签

最新问答