Nuxt 超出最大调用堆栈大小

Posted 2023-02-23

【中文标题】Nuxt 超出最大调用堆栈大小

【英文标题】：Nuxt Maximum call stack size exceeded

【发布时间】：2021-10-13 20:07:00

【问题描述】：

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

我的区间函数：

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

  async fetch() 
    const data = await this.$axios.post(`$this.apiURLorders`, 
      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() 而不设置变量，它可以正常工作

这确实是一些生命周期或者一些死循环的问题。

【参考方案1】：

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

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

---

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