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 ？

我该怎么做才能解决这个问题？

原文由 javauser35 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的 str 是对 this.state.arrayone 的引用，您正在设置 arraytwo 与 str

所以当 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/

原文由 Snahedis 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您的错误是在单击第一个按钮时将 arrayone 和 arraytwo 设置为 THE SAME OBJECT REFERENCE。

 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 的引用对象

原文由 Diniden 发布，翻译遵循 CC BY-SA 3.0 许可协议