如何在React

时间:2015-11-08 23:44:16

标签: javascript reactjs state

在反应应用程序中,我的状态如下:

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

以上作品 - 但非常难看。有更好的方法吗?

1 个答案:

答案 0 :(得分:-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});
  }