扩展运算符 [重复]

Question

我有来自 youtube 教程的代码，我不知道为什么我们需要括号（注释行），如果有人可以简单地解释这段代码...谢谢

  const [{count, count2}, setCount] = useState({count: 10, count2: 20})

  return (
    <div className="App">
      <button onClick={ () => 
        setCount(
          currentState => (//can not understand
            {...currentState, count: currentState.count+1}
          )
        )}>+</button>
      <h5>Count 1: {count}</h5>
      <h5>Count2: {count2}</h5>
    </div>
  )

Answer 1

这与展开运算符无关。

箭头函数的=> 后面可以跟：

• 表达式
• 一个块

因为在 JavaScript 中，{ 可以启动一个块或对象初始化器（这取决于上下文），任何你可以放置块但想要您需要将对象初始化器添加到 () 中，以便将 { 视为表达式的开头。

Answer 2

为什么我们需要括号

我猜是因为没有它们()，它将无法工作，即使在编译时也会引发错误。

setCount(
  currentState => (//can not understand
    {...currentState, count: currentState.count+1}
  )
)

setCount 是一个setState hooks。它有两种语法：

1. setCount( newStateOfCount )（使用直接值设置状态）
2. setCount( oldCount => newCount )（使用回调设置状态）

而你的是第二个。使用回调返回一个对象，您有 2 个选项：

currentState => {
  return {
    ...currentState, 
    count: currentState.count+1
  }
} 

比

更详细

currentState => ({
  ...currentState, 
  count: currentState.count+1
})

所以在教程中他使用了第二种语法，因为它更简洁。

没有括号是行不通的：

currentState => {
  ...currentState, 
  count: currentState.count+1
}

因为解析器会理解{ 是function body 的开头，而不是an object，如果没有您明确地给它()，它将无法弄清楚