ReactJS 和 setState 语法

Question

我试图理解我的 React 应用程序中的以下语法。本质上我想了解 setState()

中的代码

this.getSomePromise().then(
      // resolve callback function
      someImg =>
        this.setState(prevState => ({
          ...prevState,
          doggo: someImg.message
        })),
      // reject callback function
      () => alert("Rejected!")
    );

我期待的是这样的语法；

    this.setState(prevState => {
// some code
    })

但是 prevState => 后面的圆括号让我很困惑。

Answer 1

ES6 箭头使用隐式 return 语法，允许跳过 return 关键字。这是隐含的 returned 对象：

this.setState(prevState => ({
  ...prevState,
  doggo: someImg.message
}))

这是显式 return:

的快捷方式

this.setState(prevState => {
 return {
  ...prevState,
  doggo: someImg.message
 }
})

这是return编辑为新状态的对象文字：

{
  ...prevState,
  doggo: someImg.message
}

不使用 (...) 圆括号括起来会导致语法错误，因为 {...} 对象文字中的花括号将被解析为函数括号。

ReactJS 和 setState 语法

ReactJS and setState syntax

javascript

ecmascript-6

reactjs

es6-promise