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

Question

在 react 应用程序中，我的状态如下所示:

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

我相信我可能需要使用“更新”上的 react 插件来解决这个问题，如 https://facebook.github.io/react/docs/update.html

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

编辑根据(评论中指出):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});
  }