Question

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

例如，在以下方法中，状态正在直接变异（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;
  };

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

a）object spread operator

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

b）或Object.assign

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

但有时我似乎有些例子object destructuring使用它：

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;
  };

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

Answer 1

Object destructuring由reference工作，因此在解构后不应该改变对象。所以

的做法

let {errors, author} = this.state;

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

实际上是错误的。

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

＆＃13;

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

＆＃13;

Answer 2

没有。对象解构只是在＆＃39; this.state＆＃39;内分配相同的对象。到另一个变量。

let {errors, author} = this.state;

所以新的error变量引用this.state

中的同一个错误对象

但是，下一行errors = {};不会改变this.state。它只将error变量重新引用到新的空对象。所以给定的代码仍然没有进行状态变异。实际上，在此对象解构中没有任何含义error。它与此类似。

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

这与此基本没有区别。

let errors = {};

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

2 个答案: