React .setState() 中的扩展运算符答案

【问题标题】：Spread operator in React .setState()React .setState() 中的扩展运算符
【发布时间】：2019-08-10 08:33:56
【问题描述】：

鉴于以下从 React 类组件中提取的 sn-p：

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

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

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

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

【问题讨论】：

我假设有人错误地认为你需要传递整个状态来改变一个属性

标签： javascript reactjs jsx

【解决方案1】：

第二个 sn-p 有效，因为 React 隐含地为您进行传播。每React's documentation for setState：

您可以 [...] 将对象作为第一个参数传递给 setState()：setState(stateChange[, callback])。这会将 stateChange 浅合并到新状态中。

【讨论】：

【解决方案2】：

目标只是将active 设置为false，其余部分保持不变。您可以编辑状态的一部分，只需传递所需的名称，然后跳过其余部分。

【讨论】：

【解决方案3】：

在这种情况下两者都有效，但您不需要使用它。只需设置状态即可：

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。

【讨论】：

谢谢。所以在这种情况下并不是真的需要，但是在更深层次的对象的情况下，是否建议始终按上述方式设置状态？
是的。你明白了。
谢谢。最后一件事。这是保持原始状态不变吗？
状态是不可变的，这就是我们使用setState的原因
你能检查一下吗，@BhojendraRauniyar stackoverflow.com/questions/57392582/…