Object destruct是通过引用工作还是克隆对象

I need to copy an object from this.state to change some of its property values.

我需要从this.state复制一个对象来更改它的一些属性值。

For example in the following method state is being mutated directly (this.state.errors = {})

例如，在以下方法中，状态是直接变异的（this.state.errors = {}）

   authorFormIsValid = () => {
    var formIsValid = true;
    this.state.errors = {}; //clear any previous errors.

    if (this.state.author.firstName.length < 3) {
      this.state.errors.firstName = 'First name must be at least 3 characters.';
      formIsValid = false;
    }

    if (this.state.author.lastName.length < 3) {
      this.state.errors.lastName = 'Last name must be at least 3 characters.';
      formIsValid = false;
    }

    this.setState({errors: this.state.errors});
    return formIsValid;
  };

To avoid this, I know that we can use :

为了避免这种情况，我知道我们可以使用：

a) The object spread operator

a）对象扩展运算符

let errors={...this.state.errors};

b) Or Object.assign

b）或Object.assign

let errors=Object.assign({},this.state.errors);

But sometimes I've seem some examples in which object destructuring it is used like this:

但有时我似乎有一些例子，其中对象解构使用如下：

authorFormIsValid = () => {
    let formIsValid = true;

   //Destructuring error and authors from this.state
    let {errors, author} = this.state;

    errors = {}; //clear any previous errors.

    if (author.firstName.length < 3) {
      errors.firstName = 'First name must be at least 3 characters.';
      formIsValid = false;
    }

    if (author.lastName.length < 3) {
      errors.lastName = 'Last name must be at least 3 characters.';
      formIsValid = false;
    }

    this.setState({errors});
    return formIsValid;
  };

So my question is , is it object destructuring equivalent to the other two methods mentioned above? I mean, will I avoid mutating the state directly by using simple object destructuring ?

所以我的问题是，对象解构是否等同于上面提到的其他两种方法？我的意思是，我会避免使用简单的对象解构直接改变状态吗？

2 个解决方案

#1

Object destructuring works by reference and hence you should not be mutating the object after destructuring it. So the practice of

对象解构通过引用工作，因此在解构后不应该改变对象。所以的做法

let {errors, author} = this.state;

errors = {}; //clear any previous errors.

is actually wrong.

实际上是错的。

See a snippet of reference call below

请参阅下面的参考调用片段

let obj = {
  foo: {
    bar: 1
  }
}

let { foo } = obj;

console.log(foo.bar);      // 1
console.log(obj.foo.bar); // 1

foo.bar++;

console.log(foo.bar);      // 2
console.log(obj.foo.bar); // 2

#2

No. Object destructuring just assign the same object inside the 'this.state' to a different variable.

否。对象解构只是将'this.state'中的同一对象分配给另一个变量。

let {errors, author} = this.state;

So the new error variable refer to the same error object inside the this.state

所以新的错误变量引用this.state中的相同错误对象

However, next line errors = {}; doesn't mutate the this.state. It only rereference the error variable to a new empty object. So the given code still doesn't do a state mutation. In fact, there is no any meaning of having error in this object destructuring. It's similar to something like this.

但是，下一行错误= {};不会改变this.state。它只将错误变量重新引用到新的空对象。所以给定的代码仍然没有进行状态变异。事实上，在这个对象解构中没有任何错误的意义。它类似于这样的东西。

let errors = this.state.errors;
errors = {};

Which is essentially no difference from this.

这与此基本没有区别。

let errors = {};

#1