使用特定变量名称时，对象分解给我一个NaN值

Question

我的对象具有2个属性，当这些属性分别命名为left和top { left: rect.left, top: rect.top}时。解构对象后，我的x和y变量均为NaN。

const { x, y } = this.getCanvasPosition(this.canvasHex.current);

但是如果我将该对象的属性重命名为x和y { x: rect.left, y: rect.top}，则会得到我想要的值。

我想知道这里到底发生了什么。

Answer 1

需要

const { x, y } = this.getCanvasPosition(this.canvasHex.current.rect)

Answer 2

您需要重命名属性，因为您没有属性x和y，但没有left和top。

const { left: x, top: y } = this.getCanvasPosition(this.canvasHex.current);