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 })
  }

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 。

Answer 2

目標只是將active設置為false ，其余部分保持不變。 您可以編輯狀態的一部分，只需傳遞所需的名稱，然后跳過其余部分。

Answer 3

第二個片段有效，因為 React 隱式地​​為你做傳播。 根據React 的setState文檔：

您可以 [...] 將對象作為第一個參數傳遞給setState() ： setState(stateChange[, callback]) 。 這執行 stateChange 到新狀態的淺合並。