React.js：setState 覆盖，不合并

Question

我对 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 数据。我是否误解了这种合并的工作原理？

提前感谢您的帮助！

Answer 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 所说，您可以使用the immutability helpers 来获得您想要的效果：

var newState = React.addons.update(this.state, {
  point: { x: {$set: 10} }
});
this.setState(newState);

参见this JSFiddle 示例：http://jsfiddle.net/BinaryMuse/HW6w5/

Answer 2

合并是浅的，所以this.setState({point}) 保留 (ed: this.state.radius) 不变，但完全替换 (ed: this.state.point)。

https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-are-merged

要对已经给出的答案提供 ES7+ 视角，请使用 transform-object-rest-spread 而不是 Object.assign()：

class MyComponent extends React.Component {
    state = {
        point: { 
            x: 0, 
            y: 0,
        },
        radius: 10,
    }

    handleChange = () => {
        this.setState((prevState, props) => ({
            point: {
                // rest operator (...) expands out to:
                ...prevState.point, // x:0, y:0,
                y: 1, // overwrites old y
            },
            // radius is not overwritten by setState
        }));
    }

    render() {
        // omitted
    }
}

.babelrc（也需要 babel 预设阶段 2 中的 transform-class-properties）

{
    "presets": ["es2015", "stage-2", "react"],
    "plugins": ["transform-object-rest-spread"],
}

2018 年 4 月 22 日更新

正如@sheljohn 指出的（谢谢！），在setState 中引用this.state 是不可靠的：

由于this.props 和this.state 可能会异步更新，因此您不应依赖它们的值来计算下一个状态。

...

要修复它，请使用setState() 的第二种形式，它接受一个函数而不是一个对象。该函数将接收先前的状态作为第一个参数，并将应用更新时的道具作为第二个参数

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

Answer 3

类似：

getInitialState: function() {
    return {
        something: { x: 0, y: 0 },
        blah: 10
    };
}

var state = Object.assign(this.state, {
    something: Object.assign(this.state.something, { y: 50 }),
});

this.setState(state);

如果它是递归/深度而不是硬编码树会更好，但我会把它留给读者:)