扩展运算符动态属性更新答案

【问题标题】：Spread Operator Dynamic Properties Update扩展运算符动态属性更新
【发布时间】：2017-06-12 11:18:20
【问题描述】：

我的状态如下所示：

state: {
    1: {show: false, description: 'one'},
    2: {show: false, description: 'two'},
    3: {show: true, description: 'three'}
   }

根据来自操作的变量“id”，我必须更新状态。

类似这样的：

var returnedState = {...state, [id].show : ![id].show}

我该怎么做？

【问题讨论】：

【解决方案1】：

{...state,
 [id]: {
  show: !state[id].show 
 }
}

这将复制原始状态，然后切换来自操作的特定键/ID 的显示值。

【讨论】：

它给了我这个错误：模块构建失败：SyntaxError: Unexpected token {...state, [id] : {show: !state.[id].show}}。意外的标记是 !state.[id] id 之前的“[”
因为你输入了!state.[id]它必须是!state[id]

【解决方案2】：

之前的答案是正确的，但只是将 show 属性保留在子对象上，删除了其他的。要保留所有属性并更改您想要使用的属性：

 {...state, [id] : {...state[id], show: !state[id].show}}

必须加...state[id]

【讨论】：

【解决方案3】：

this.setState(prevState => ({
...state,
state[id]: !prevState[id].show
}))

在这里，您必须将最后一个状态作为 prevState，然后使用提供的键更新对象，该键与前一个状态的对象的值相反。

【讨论】：