javascript - 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":"东京"},{"id":"2","city":"布鲁克林"}]

arraytwo : [{"id":"1","city":"东京"},{"id":"2","city":"布鲁克林"}]

当我单击第二个按钮时，我只想将 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/