React.js並更新JSON數組狀態

Question

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值設置為東京。

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 ？

我該怎么做才能解決這個問題？

Answer 1

您的str是this.state.arrayone的引用，並且您正在使用str設置arraytwo 。

因此，當arrayone更改時，arraytwo也會更改。 直接使用this.state.arrayone設置str是一個壞主意。 相反，您應該克隆狀態以能夠更改要更改的內容，並且僅在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/

Answer 2

您的錯誤是在單擊第一個按鈕時將arrayone和arraytwo設置為“相同對象引用”。

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

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

因此，當您獲得arrayone並更改對象的值時

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

您更改了arrayone和arraytwo的引用對象

Answer 3

當您將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});

或者，您可以克隆 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});