React .setState() 中的展开运算符

Question

给定以下从 React 类组件中提取的片段：

 constructor(props) {
    super(props)
    this.state = { active: true }
  }

  deactivate = () => {
    this.setState({ ...this.state, active: false })
  }

扩展运算符进入 stopCounter() 方法的目的是什么？该应用程序也可以删除它：

   deactivate = () => {
    this.setState({ active: false })
  }

原文由 Biomehanika 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

两者都适用于那种情况，但您不需要使用它。只需设置状态就可以了：

 this.setState({active: false})

但是让我解释一下，如果你有嵌套的状态级别，比如：

 state = {
  foo: {
   a: 1,
   b: 2,
   c: 3
  }
}

当您只需要更新 foo 的 c 状态时，您需要像这样合并状态：

 this.setState({ foo: {
  ...this.state.foo,
  c: 'updated value'
}})

因此，传播语法将对象与后来的对象合并。它类似于 Object.assign 。

原文由 Bhojendra Rauniyar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

第二个片段有效是因为 React 隐式地为您进行传播。根据 React 的文档 setState ：

您可以 […] 将对象作为第一个参数传递给 setState() : setState(stateChange[, callback]) 。这执行了 stateChange 到新状态的浅合并。

原文由 Huy Nguyen 发布，翻译遵循 CC BY-SA 4.0 许可协议