javascript - 使用 Object.assign 替换状态

Question

对于状态为 { key: bool } 的 React 组件，为什么在单击不同选项时不会从新状态中省略现有状态键？

https://jsfiddle.net/69z2wepo/35003/

var Hello = React.createClass({

  getInitialState: function() {
    return {};
  },

  render: function() {
    return (
      <div>
        <div onClick={this.handleClick.bind(this, 'foo')}>Foo</div>
        <div onClick={this.handleClick.bind(this, 'bar')}>Bar</div>
        <div onClick={this.handleClick.bind(this, 'baz')}>Baz</div>
        <div>{ 'Foo State: ' + this.state.foo }</div>
        <div>{ 'Bar State: ' + this.state.bar }</div>
        <div>{ 'Baz State: ' + this.state.baz }</div>
      </div>
    );
  },

  handleClick: function(id) {
    this.setState(Object.assign({}, { [id]: !this.state[id] } ));
  }

});

这是正在发生的事情:

1. 点击Foo:状态变为{ foo: true }(预期)
2. 点击 Foo:状态变为 { foo: false }(预期)
3. 点击Foo:状态变为{ foo: true }(预期)
4. 点击Bar:状态变为{ foo: true, bar: true }(不是预期的)

我使用 Object.assign 的目的是清除任何现有状态并将其替换为新的键/ bool 对。

有人可以解释为什么在第 4 步中，{ foo: true } 保持状态吗？

如何在不知道哪个选项之前处于事件状态的情况下清除现有状态？

--

(注意:我在原始帖子后添加了最后一行，因为在不知道如何处理的情况下了解 setState 的行为方式并不是很有帮助。我会接受答案基于原始帖子。请参阅我的答案，了解用未弃用的 API 替换状态的半干净方式)。

Answer 1

setState 本身旨在将新状态与现有状态合并(并根据需要更新 key )。您永远不会用新对象替换整个状态。

还值得注意的是，在这种情况下无需调用 Object.assign。您对 setState 的调用应该只是:

this.setState({ [id]: !this.state[id] });

如果您更愿意自己处理合并，则需要使用 replaceState相反(这会给你想要的行为):

this.replaceState(Object.assign({}, { [id]: !this.state[id] });