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。它具有2种语法：

setCount( newStateOfCount )（使用直接值设置状态）
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的开始，所以如果没有您的明确声明，它将无法弄清它给它()

点差运算符

2 个答案: