如何在 React 中的对象之间复制嵌套状态

Question

在一个反应​​应用程序中，我的状态如下所示：

dates: {"2015-11-20":{
                      "13:00":{...},
                      "14:00":{...}},
        "2015-11-21":{
                      "18:00":{...},
                      "19:00":{...}}}

我在更新状态时遇到了问题 - 我的用例是我希望用户能够通过 UI 将所有时间（例如下午 1 点和下午 2 点）复制到其他日期并相应地更新状态。

到目前为止，我所有的尝试都导致了引用，其中单独的对象被链接起来，对一个对象的任何更新都会导致对另一个对象的更新。

产生损坏行为的示例代码：

copyTimes: function() {
      var keys = [];
      Object.keys(this.state.dates).map(function(key) {
          keys.push(key);
      });

      for(var i in keys) {
        this.state.dates[keys[i]] = this.state.dates[this.state.selectedDate];
      }

      this.setState({dates: this.state.dates});
  }

根据https://facebook.github.io/react/docs/update.html，我相信我可能需要使用 react add on 'update' 来解决这个问题

但我无法完全理解我需要采用的语法方法。如何导致正确更新“复制”一个日期的内容：“2015-11-20”到另一个日期，例如2015-11-21 在上面的例子中？

编辑 根据（在 cmets 中指出）：What is the most efficient way to deep clone an object in JavaScript?

  copyTimes: function() {
      var keys = [];
      var tempStart =  JSON.parse(JSON.stringify(this.state.dates));
      Object.keys(this.state.dates).map(function(key) {
          keys.push(key);
      });

      for(var i in keys) {
        tempStart[keys[i]] = JSON.parse(JSON.stringify(this.state.dates[this.state.selectedDate]));
      }

      this.setState({dates: tempStart});
  },

上述方法有效 - 但非常难看。有更好的方法吗？

Answer 1

copyTimes: function() {
      var keys = [];
      Object.keys(this.state.dates).map(function(key) {
          keys.push(key);
      });

      var newDates = Object.assign({}, this.state.dates);;
      for(var i in keys) {
        newDates[keys[i]] = this.state.dates[this.state.selectedDate];
      }

      this.setState({dates: newDates});
  }