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阵列状态

回答

相关问题