React.js：setState覆盖，不合并

小编典典

React.js：setState覆盖，不合并

reactjs

我对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数据。我是否误解了此合并的工作方式？

在此先感谢您的帮助！

阅读 513

2020-07-22

共1个答案

小编典典

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

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/

2020-07-22