Question

所以在我的setState方法中，我的以下代码可以正常工作。

onDropoffTimeChange(event) {
  event.persist();
  this.setState((currentState) => {
    const searchParams = currentState.searchParams.clone();
    searchParams.dropoffTime = event.target.value;
    return { searchParams };
  });
}

克隆是我放入SearchParams类中的一种方法，如下所示：

class SearchParams {
  constructor(
    aDropoffTime,
  ) {
    this.dropoffTime = aDropoffTime;
  }

  clone() {
    return new SearchParams(
      this.dropoffTime,
    );
  }
}

现在我的理解是object.assign会做同样的事情？换句话说，我想摆脱克隆方法并使用following，但它不会更新状态吗？

onDropoffTimeChange(event) {
  event.persist();
  this.setState((currentState) => {
    const searchParams = Object.assign({}, currentState.searchParams);
    searchParams.dropoffTime = event.target.value;
    return { searchParams };
  });
}

Answer 1

如果您使用的是ES-6，则可以简单地使用'...'运算符来摆脱'clone'方法。

    this.setState((currentState) => {
       return {
         searchParams: {
           ...currentState.searchParams,
           dropoffTime: event.target.value,
        }
       };
    });

Answer 2

您应该使用对象传播方法（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax）复制可迭代对象。

如果dropoffTime是searchParams对象的一部分，则需要将currentState.searchParams散布在searchParams对象内。

this.setState((currentState) => {
   return {
     searchParams: {
       ...currentState.searchParams,
       dropoffTime: event.target.value
     }
   };
});

反应克隆vs object.assign

2 个答案: