Question

以下代码更新一些数据，重新获取数据，然后等待加载图像字段：

api.updateBuildings(payload).then(result => {
  this.fetchBuildings(() => {
    const image = new Image()
    image.src = result.data.web
    this.setIsLoading(false)
    image.onload = () => {
      console.log('LOADED:', image.onload())
    }
  })
})

但是，image.onload会引发Maximum Call Stack Size Exceeded。

为什么会这样？

修改

result.data看起来像这样：

{ app: "http://ac-0uhksb6K.clouddn.com/370b989e0ceec6329fb6.jpg? imageView/2/w/4096/h/2048/q/100/format/png" categoryType : "livingroom" web: "http://ac-0uhksb6K.clouddn.com/370b989e0ceec6329fb6.jpg?imageView/2/w/4096/h/2048/q/100/format/png" }

Answer 1

原因很简单。您在没有任何中断条件的情况下以递归方式调用image.onload()。因此，连续调用方法直到达到调用堆栈限制。

问题陈述是

console.log('LOADED:', image.onload()); //<==========

好读Maximum call stack size exceeded error

Answer 2

因为您在image.onload()函数中调用了console.log，因此创建了一个递归。您可能希望将日志更改为以下内容：

 image.onload = () => {
      console.log('LOADED:', image.src);
 }

为什么以下image.onload抛出：＆＃34;超出最大调用堆栈大小＆＃34;？

2 个答案: