对象解构赋值在构造函数中表现异常

Question

我正在使用 electron 和 React，我有一些代码如下所示：

constructor(props) {
  super(props);
  const { arr } = this.props;
  ipcRenderer.on('event', () => {
    console.log(this.props.arr); // will log updated values
    console.log(arr); // always logs initial value 
  });
}

有人知道为什么会这样吗？我无法在其他任何地方重现这一点。我试过用 window 事件处理程序和闭包做类似的事情，看看它们是否以相同的方式运行，但它们没有。我错过了一些很明显的东西吗？

const obj = { arr: [1, 2, 3] };
const { arr } = obj;
obj.arr.push(4);
arr.push(5);

console.log(obj.arr); // => [1, 2, 3, 4, 5]
console.log(arr); // => [1, 2, 3, 4, 5]

Answer 1

Am I missing something really obvious?

推测 new 数组分配给 this.props.arr。简单复制：

const obj = { arr: [1, 2, 3] };
const { arr } = obj;
obj.arr = [1];

console.log(obj.arr); // => [1]
console.log(arr); // => [1, 2, 3]

解构没什么神奇的。这两个是等价的：

const { arr } = this.props;
const arr = this.props.arr;

arr 保存 this.props.arr 在 赋值时的值 ，而 this.props.arr 给你当时的值你访问它。

对象解构赋值在构造函数中表现异常

Object Destructuring Assignment Behaving Weirdly in Constructor

javascript

object

destructuring

reactjs

electron