Nuxt 超出最大调用堆栈大小答案

【问题标题】：Nuxt Maximum call stack size exceededNuxt 超出最大调用堆栈大小
【发布时间】：2021-10-13 20:07:00
【问题描述】：

我尝试设置函数的间隔，以便在组件将被销毁时将其删除，但出现此错误。并且找不到任何解决方案。

我的区间函数：

<script>
export default {
  data: () => ({
    ordersInterval: null,
  }),

  async fetch() {
    const data = await this.$axios.post(`${this.apiURL}orders`, {
      per_page: this.$store.state.pagination.per_page,
      page: this.$store.state.pagination.current_page,
    })
    this.orders = data.data.data
    this.$store.dispatch('changePaginationData', {
      paginationData: data.data.meta,
    })
    this.ordersInterval = setInterval(() => {
      this.filterOrders()
    }, 10000)
  },
}
</script>

我该如何解决这个错误？

【问题讨论】：

当您的代码中有某种不受控制的递归时，通常会调用调用堆栈异常。试着找到它。它可能不在您显示的这段代码中
在这段代码中。如果我只设置 setInterval() 而不设置变量，它可以正常工作
这确实是一些生命周期或者一些死循环的问题。

标签： javascript nuxt.js

【解决方案1】：

ESlint 正在抱怨并将其标记为错误。
这可能是因为fetch() 需要知道何时完成提取，尤其是像$fetchState.pending 这样的帮助者。

我在一些代码中使用了setInterval，但它在事件中被调用。你最终可以有一个观察者并在它为真时调用setInterval（在你的fetch()钩子中切换它）。

如果可以，请尝试使用 websocket 或比轮询更灵活的系统。
轮询也可能很难编写（使用this），这里有一个关于如何编写它的好答案：https://stackoverflow.com/a/43335772/8816585

【讨论】：