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

How to copy nested state between objects in React

本文关键字：之间 嵌套 状态 对象 复制 React      更新时间：2023-09-26

在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？

编辑根据（在评论中指出）：在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});
  },

上面的效果不错，但非常难看。有更好的方法吗？

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

相关文章：