Question

我正在尝试发布更新的对象，但没有尝试通过以下代码更改状态：

addPlaceToSearch = (place) => {
    if (place != this.state.search_text) {
      var search = $.extend({}, this.state.search);
      if (!search.added_places.includes(place)) {
        search.added_places.push(place);
        PubSub.publish('searchUpdated', search);
      }
    }
  }

因此，我使用$.extend({}, this.state.search)将对象克隆到另一个变量中，修改该特定变量然后发布它。但是当我执行line 5并在line 6上设置断点时，我可以看到this.state.search也被更改place被推入added_places键（我不想要）。这是怎么回事？我该如何预防呢？我还尝试了Object.assign({}, this.state.search)而不是$.extend({}, this.state.search)。

修改

我甚至尝试过最简单的解决方案，这里是：

addPlaceToSearch = (place) => {
    if (place != this.state.search_text) {
      if (!this.state.search.added_places.includes(place)) {
        var xyz = {};
        for (var key in this.state.search) {
          xyz[key] = this.state.search[key];
        }
        xyz.added_places.push(place);
        PubSub.publish('searchUpdated', xyz);
      }
    }
  }

然而，xyz.added_places.push(place)行也改变了我的this.state.search对象！请帮助我。

Answer 1

最后，经过两个小时的努力，我通过制作原始数组的深层副本来找出解决方案。我将阅读this answer中给出的浅拷贝和深拷贝之间的差异，直到那时这是解决方案：

var xyz = $.extend(true, {}, this.state.search);
xyz.added_places.push(place);

Answer 2

使用Object.assign()

，无需jQuery即可更好地完成此操作

var xyz = Object.assign({}, this.state.search)
xyz.added_places.push(place)

在克隆的状态对象中推送元素会立即为state属性增加值

2 个答案: