Question

根据React Docs，我们可以通过两种方式为setState创建一个具有对象语法的方法，另一种方式可以使用如下所示的函数

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

我对箭头功能语法的理解与() => {}类似，其中花括号在箭头=>之后，但根据示例，它是圆括号而不是花括号< / p>

这些语法()=>{}和()=>({})之间有什么区别。

根据在this.setStage(prevStage=>({}))函数中使用handleClick语法时正在运行的文档尝试示例代码，如果将其更改为this.setState(prevStage=>{})，则不会切换按钮值。

以下是工作代码：

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isToggleOn : true
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
          }));
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>
                    {this.state.isToggleOn ? 'ON' : "OFF"}
                </button>
            </div>
        );
    }
}

Answer 1

后来我提到MDN并在高级语法部分下找到了详细信息，如果你想隐式返回对象，那么我们需要将它包含在（）中，这回答了我的问题。

//括号化函数体以返回对象文字表达式：

params =＆gt; （{foo：bar}）

Answer 2

这里有两个主要问题需要考虑：

arrow functions如何运作？
将function作为参数传递时，setState期望什么？

回答：

箭头函数可以隐式或显式返回值什么时候没有函数体（没有大括号{}）那么你就是隐含地返回：
```
const x = () => 'we are returning a string here';  
```
当我们使用函数体时，我们需要使用return关键字：
```
const x = () => {
  return 'another string returned'
};
```
还有另一种方法可以在没有return键的情况下返回内容单词，你可以用括号()和它包裹大括号将向发动机发出大括号不是功能体的信号但是一个对象，这被认为是创建一个表达式：
```
const x = () => ({myKey: 'some string'});
```
这与我们通常使用的函数表达式类似特别是对于IIFE（我立即我 nvoked F E xpression）：
```
(function() {
    //some logic...
})();  
```
如果我们不返回任何内容，那么该函数将返回undefined。
对于setState，当您将函数作为参数传递时，它期望此函数将返回一个对象当你的功能没有返回任何东西时（如上所述）它实际上返回undefined。
JavaScript不会产生错误，因为事实并非如此一个错误。它只是一个不返回任何内容的函数（undefined）。

以下是没有包装括号的代码的运行示例：

＆＃13;

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true
    }
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => {
      return { // we must return an object for setState
        isToggleOn: !prevState.isToggleOn
      } 
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          {this.state.isToggleOn ? 'ON' : "OFF"}
        </button>
      </div>
    );
  }
}


ReactDOM.render(<Toggle />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

修改
作为您的意见的后续行动

当我们只返回key：value时，我希望Javascript会抛出错误   没有括号，即（）=＆gt; {key：value} - 意思是   它试图回归关键：价值＆＃39;而不是对象，这应该是   一个JS错误，但它没有抛出任何错误。如果我的话，请纠正我   理解是错误的

它没有返回一个键值，它是一个＆＃34; void＆＃34;返回undefined的函数。
请参阅此运行代码段：

＆＃13;
＆＃13;
const x = () => {myKey: 'myValue'}; const y = x(); console.log(y);
＆＃13;
＆＃13;
＆＃13;

修改＃2
跟进你的其他评论（在我看来，这基本上是一个完全不同的问题）。


让y = function（）{＆＃39; abc＆＃39;：1} - 语法错误，让y = function（）{abc：1}   并且让y = function（）{return {＆＃39; abc＆＃39;：1}} - 没有错误，第一个   （语法错误）我们试图将1分配给字符串abc，这是相同的   作为第3个样本（没有错误），第2个例子将1分配给abc - 有效   什么时候没有报价。请解释这3的区别   样本以及为什么第一个失败而不是第二个例子

好的，这很有意思。


其中第一个（语法错误）我们试图将1分配给字符串abc ...

不，我们不是。
我们正在尝试创建label:，但标签不能为字符串！
与变量相同可以＆＃39; 为字符串 - var 'x' = 1。

这是JavaScript中的有效语法：

const y = function(){b:2};

我们在这里做的是创建名为a的{{3}}，此标签的表达式为1（我们对此标签没有做任何事情。）。

＆＃13;
＆＃13;
const x = () => {a:1}; const y = function(){a:1};
＆＃13;
＆＃13;
＆＃13;

此语法无效：

const y = function() { 'a': 1 };

这是无效的，因为标签不能以字符串开头：

＆＃13;
＆＃13;
const x = () => { 'a': 1 }; const y = function() { 'a': 1 };
＆＃13;
＆＃13;
＆＃13;

同样，这不是key:value对，大括号是 BODY 的功能。

Answer 3

如果你只写（）=＆gt; {}这明确意味着该函数不仅仅返回一些东西。

例如：

const logAndReturn = (val) => {
  console.log(val)
  return val
}

但是，假设您有一个函数，它接受参数并返回基于这些参数的对象。

const createUser = (x) => { 
  prop: x
}

这将提示错误，因为这基本上转换为：

function createUser(x) { 
  prop:x 
}

使用paranthesis，您仍然使用箭头功能的默认返回。

const createUser = (name, email) => ({})
function createUser(name, email) { return {} )

Answer 4

简单的答案是

()=>({})

它也等于

()=> {
   return {}
 }

返回一个空对象，这里的括号{}表示return。你也知道我们必须将对象传递给setState所以我们在{}

之间插入我们想要说明的任何内容

()=>({any thing you want to set to state})

Reactjs setState箭头函数语法

4 个答案: