Javascript 使用Object.assign替换状态

对于这个状态为

{key:bool}

的React组件，为什么在单击其他选项时新状态中没有忽略现有状态键

var Hello=React.createClass({
getInitialState:函数（）{
返回{}；
},
render:function（）{
返回(
福
酒吧
巴兹
{'Foo State:'+this.State.Foo}
{'Bar State:'+this.State.Bar}
{'Baz State:'+this.State.Baz}
);
},
handleClick:函数（id）{
this.setState（Object.assign（{}，{[id]：！this.state[id]}））；
}
});

下面是正在发生的事情：

单击

Foo

：状态变为

{Foo:true}

（预期）

单击

Foo

：状态变为

{Foo:false}

（预期）

单击

Foo

：状态变为

{Foo:true}

（预期）

单击

Bar

：状态变为

{foo:true，Bar:true}

（非预期）

我使用的是

Object.assign

，目的是清除任何现有状态，并用新的key/bool对替换它

有人能解释一下为什么在第4步，

{foo:true}

仍处于状态吗

如何清除现有状态，而不必知道以前哪个选项处于活动状态

--

---

（注意：我在原始帖子后添加了最后一行，因为知道

setState

为什么会这样做而不知道该怎么做是没有多大帮助的。我将接受基于原始帖子的答案。请参阅我的答案，了解用非弃用API替换状态的半干净方法）。您永远不会用新对象替换整个状态

同样值得注意的是，在这种情况下，不需要调用

Object.assign

。您对

setState

的调用应该是：

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

如果您希望自己处理合并，则需要改用（这将为您提供所需的行为）：

---

replaceState

已被弃用（如果您尝试使用它，请参阅、和您的控制台），正如Justin/Andy所解释的，

setState

将始终合并，而不会替换

我能想到的清除现有状态的最干净的方法是将初始状态设置为

{active:{}}

，然后根据需要使用这一行程序切换或替换：

---

this.setState（{active:（this.state.active[id]）？{}:{[id]：true}）
如果要完全替换状态，可以使用
replaceState
this.setState({ [id]: !this.state[id] });

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