Question

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

docker run <image> node service.js

传播算子进入stopCounter（）方法的目的是什么？该应用程序还可以删除它：

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

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

Answer 1

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

Answer 2

第二个代码段之所以起作用，是因为React隐式地为您进行扩展。根据{{3}}：

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

Answer 3

在这种情况下两者都可以使用，但是您不需要使用它。只需设置状态就可以了：

this.setState({active: false})

但是让我解释一下，如果您嵌套了以下级别的状态，怎么办：

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

并且当您只需要更新foo的c状态时，则需要合并以下状态：

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

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

React .setState（）中的传播运算符

3 个答案: