React.js和更新JSON陣列狀態

var DENEMEJSON = React.createClass({ 
getInitialState: function() { return { 
    arrayone:[{"id":"1","city":"New York"},{"id":"2","city":"Brooklyn"}], 
    arraytwo:[{"id":"101","city":"Hamburg"},{"id":"102","city":"Schalke"}] 

} 


}, 
buttonFunc(){ 
    var str=this.state.arrayone; 
    str[0].city="Tokyo"; 

    this.setState({arrayone:str}); 
    this.setState({arraytwo:str}); 
}, 
buttonFunc2(){ 
var str=this.state.arrayone; 
    str[0].city="Pakistan"; 
    console.log(JSON.stringify(this.state.arrayone)); 
    console.log(JSON.stringify(this.state.arraytwo)); 
    this.setState({arrayone:str}); 
}, 

render: function() { 
     return (  <div> 
     <button onClick={this.buttonFunc}/> 
     <button onClick={this.buttonFunc2}/> 
     {JSON.stringify(this.state.arrayone)} 
     {JSON.stringify(this.state.arraytwo)}</div> 
      ) 
    }//end return 

});

當我點擊第一個按鈕代碼做我想做的。它將arrayone[0].city和arraytwo[0].city的價值設置爲像這樣的東京。React.js和更新JSON陣列狀態

arrayone：[{"id":"1","city":"Tokyo"},{"id":"2","city":"Brooklyn"}]

arraytwo：[{"id":"1","city":"Tokyo"},{"id":"2","city":"Brooklyn"}]

當我點擊第二個按鈕，我只想arrayone[0].city值設置爲Pakistan（不arraytwo）。

但代碼集arrayone[0].city和arraytwo[0]的值設置爲Pakistan。

爲什麼設置arraytwo[0].value到Pakistan？

我能做些什麼來解決這個問題？

來源

2016-01-22 javauser35

你不應該叫'setState'兩次一種方法。在'buttonFunc'中結合兩個'setState'調用就像這樣：'this。setState（{array：str，arraytwo：str}）' –

我試過，但仍然是相同的結果。 – javauser35

我不是在建議它作爲解決問題的辦法 - 只是最佳實踐。 –

你str是對this.state.arrayone的參考，並且您將arraytwo設置爲str。

所以當arrayone變化，arraytwo變化太大。將str直接設置爲this.state.arrayone是個好主意。相反，您應該克隆狀態以便能夠更改要更改的內容並僅在setState中更新您的狀態。

var cloneArrayone = JSON.parse(JSON.stringify(this.state)).arrayone; 
cloneArrayone[0].city = "Tokyo"; 

this.setState({ 
    arrayone: cloneArrayone, 
    arraytwo: cloneArrayone 
});

這裏是工作一個例子：https://jsfiddle.net/snahedis/69z2wepo/28552/

來源

2016-01-22 23:16:23 Snahedis

你的錯誤是設定arrayone，當你點擊第一個按鈕arraytwo到相同的對象引用。

所以當你arrayone，改變對象的值

var str=this.state.arrayone; 
str[0].city="Pakistan";

你改變都arrayone和arraytwo真實引用的對象

來源

2016-01-22 22:47:36 Diniden

如果同時設置arrayone和arraytwo到str出現問題。

this.setState({arrayone:str}); 
this.setState({arraytwo:str});

在這樣做時，兩者被分配給相同的對象的引用，以便對該對象發生的變化將它們兩者製成。解決此

的一種方法是分別設定他們兩個：

var str = this.state.arrayone; 
var str2 = this.state.arraytwo; 

str[0].city="Tokyo"; 
str2[0].city="Tokyo"; 

this.setState({arrayone:str}); 
this.setState({arraytwo:str2});

或者，你可以clone的str對象，使這第二個，獨立的副本：

var str = this.state.arrayone; 

str[0].city="Tokyo"; 

var strCopy = JSON.parse(JSON.stringify(str)); 

this.setState({arrayone:str}); 
this.setState({arraytwo:strCopy});

來源

2016-01-22 22:48:05 pohlman

React.js和更新JSON陣列狀態

回答

相關問題