如何在對象之間複製嵌套的狀態作出反應

在反應的應用程序，我的狀態看起來像這樣：如何在對象之間複製嵌套的狀態作出反應

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

我正在與更新狀態的問題 - 我的使用情況是我希望用戶能夠通過UI複製所有時間（例如，上午1點，下午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

，但我不能完全瞭解我需要採取的語法方法。如何導致正確的更新將'日期：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}); 
    },

上述工作 - 但非常難看。有更好的方法嗎？

來源

2015-11-08 Dave

不知道是否有任何與你的問題，但是從[文件]中的*紅色的大盒子*（http://facebook.github.io/react/ docs/component-api.html＃setstate）：*「永遠不要直接改變this.state'，因爲事後調用'setState（）'可能會替換你所做的變異，把'this.state'看作是不可變的。 *。我想你需要的是深入克隆'this.state.dates [this.state.selectedDate]'。請參閱http://stackoverflow.com/q/122102/218196。 –

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

來源

2015-11-09 00:08:48

不幸的是，這導致了同樣的問題。深度克隆是必要的。 – Dave

你能解釋你改變了什麼以及爲什麼它能解決這個問題嗎？（它不，所以我很好奇你的思維過程） –

是否var newDates = Object.assign（{}，this.state.dates）;工作。 –

如何在對象之間複製嵌套的狀態作出反應

回答

相關問題