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

您的.then是对str的引用，您将this.state.arrayone设置为arraytwo。

所以当arrayone发生变化时，array也会发生变化。将str直接设置为str是个不错的主意。相反，您应该克隆状态以便能够更改您想要更改的内容并仅在this.state.arrayone更新您的状态。

setState

以下是一个有效的示例：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});

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

React.js并更新JSON数组状态

3 个答案: