Question

在反应应用程序中，我的状态如下：

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

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

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

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

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

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

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

EDIT 根据（评论中指出）：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

＆＃13;

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

＆＃13;

如何在React

1 个答案: