为什么下面的image.onload投掷：“超出最大调用堆栈大小”？

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

因为你在console.log函数中调用image.onload()，从而创造一个递归。您可能想要将日志更改为如下所示：

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