使用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本身旨在将新状态与现有状态合并（并根据需要更新密钥）。你永远不会用新对象替换整个状态。

还值得注意的是，在这种情况下无需拨打Object.assign。您对setState的致电应该是：

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

如果您宁愿自己处理合并，则需要使用replaceState代替（这会为您提供所需的行为）：

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

Answer 2

Esc合并键，而不是完全覆盖状态。

Answer 3

replaceState已被弃用（如果您尝试使用，请参阅here，here，here，here和您的控制台，以及Justin / Andy解释说，setState将永远合并，永不替换。

我能想到消除现有状态的最简洁方法是设置初始状态{ active: {} }，然后根据需要使用此单行切换或替换：

this.setState({ active: (this.state.active[id]) ? {} : { [id]: true } });