React.js:setState覆盖,不合并

我对react.js还是很陌生,并且正在通过构建砌体样式布局进行试验。

我将每个元素呈现给DOM,然后需要遍历每个项目并根据前面的元素应用x和y位置。

初始模型如下所示:

[

{

"title": "The Forrest",

"description": "some cool text",

"imgSmallSrc": "/img/img4-small.jpg",

"imgAlt": "Placeholder image",

"tags": [

"Design",

"Mobile",

"Responsive"

],

"date": 1367154709885,

"podStyle": {

"width": 253

}

}

]

(我只显示了一个项目以使内容简短)。

完成循环并获取x和y数据后,我想将其应用于podStyle对象。我用以下数据调用setState:

[

{

"podStyle": {

"x": 0,

"y": 0,

"height": 146,

"width": 253

}

}

]

这似乎从模型中删除了所有当前数据,而只剩下了podStyle数据。我是否误解了此合并的工作方式?

在此先感谢您的帮助!

回答:

如果您的状态是一个对象:

getInitialState: function() {

return { x: 0, y: 0 };

}

您可以用来setState在该对象上设置单个键:

this.setState({ x: 1 }); // y still == 0

React不会智能合并您的状态;例如,这不起作用:

getInitialState: function() {

return {

point: { x: 0, y: 0 },

radius: 10

};

}

this.setState({point: {x: 1}});

// state is now == {point: {x: 1}, radius: 10} (point.y is gone)

[编辑]

如@ssorallen所述,您可以使用不变性帮助器来获得想要的效果:

var newState = React.addons.update(this.state, {

point: { x: {$set: 10} }

});

this.setState(newState);

有关示例,请参见此JSFiddle:http

//jsfiddle.net/BinaryMuse/HW6w5/

以上是 React.js:setState覆盖,不合并 的全部内容, 来源链接: utcz.com/qa/408592.html

回到顶部