Fat Arrow notation with curly braces in setState Dart/Flutter

Question

I am very new to Dart/Flutter and I have a confusion regarding the => notation. The documentation says that the => notation is used as a shorthand to return a single expression.

bool isNoble(int atomicNumber) => _nobleGases[atomicNumber] != null;

My doubt comes when I am trying to set state in a flutter application.

RaisedButton(
  onPressed: () => {
    setState(() {
      print('hello');
      _products.add('More stuff');
    })
  },
  child: Text('Add Product'),
),

Now when i change the setState method with => notation

RaisedButton(
  onPressed: () => {
    setState(() => {
      print('hello'),
      _products.add('More stuff'),
    })
  },
  child: Text('Add Product'),
),

Both methods mentioned above work, that is they set the state as expected. All i had to do was change the semicolons to commas when using the fat arrow notation.

What is the logic behind this ? How is the fat arrow notation working with curly braces which contains multiple expressions within it.

Edit

As mentioned by Hemanth Raj the => returns a set and the code segment containing the => notation can be written as follows.

RaisedButton(
  onPressed: () => {
    setState(() {
     return {
       print('hello'),
       _products.add('More stuff'),
     };
    })
  },
  child: Text('Add Product'),
),

返回的set包含打印功能和_products.add如何实际更新状态。它不应该引发某种错误，因为通常setState是由诸如的表达式完成的 _products.add('More stuff');。

Answer 1

这是我很想回答的有趣问题之一。

正如这里的官方文档所说， yes=>用作速记语法，{ return ... }这意味着=>将只返回右侧产生的任何内容。

同样从Dart 2.2上面开始， aSet可以用逗号分隔的值定义在 a 中，{}如文档here中所述。

因此，使用的是，即，语法{}与用逗号分隔的语句，它被当作一个Set由=>功能。每个元素都是一个函数调用，() => { f(a) , f(b), g(a),}将返回一个Set包含每个函数调用返回的元素。

这个例子可能会帮助你理解幕后发生的事情：

dynamic reflect(dynamic a){
  return a;
}

void main() {  
    Function shortHand = () => {reflect(1),reflect('a'),reflect({}),reflect([]),}; // this function when called will return a Set<dynamic>
    print(shortHand().runtimeType); // will print `_LinkedHashSet<dynamic>`
}

所以语法

() => '...'返回一个String，

() => [ ... , ..., ...] 返回一个 List

并且类似地() => { ... , ... , ... }实际上返回一个Set

注意：不推荐使用这种以逗号分隔的函数调用返回集合的方法，除非您希望将 aSet作为结果返回，否则也会要求您不要使用它

回复编辑：

让我为您分解函数调用和结果。所以你的代码是这样的，

() => {
    setState(() {
     return {
       print('hello'),
       _products.add('More stuff'),
     };
    })
  }

这里=>返回Set结果为setState，即它会返回{ (result of setState call) }可能是{ null }

当你调用setState下面的代码被执行时，它再次返回一个Setwith{ (result of print), (result of _product.add), }

() {
      return {
        print('hello'),
        _products.add('More stuff'),
      };
    }

状态将在您执行时更新，无论您在何处调用它_products.add('More stuff')，'More stuff'都将添加到_products何处。当setState被调用时，小部件将使用_products添加的新数据重建。

希望这有帮助！

Answer 2

作为记录，您正在执行的操作的推荐语法是：

RaisedButton(
    onPressed: () {
      setState(() {
        print('hello');
        _products.add('More stuff');
      });
    },
    child: Text('Add Product'),
),

语法(args) => { statements }是不是飞镖怎么写函数体，你做的任何(args) { statements }或(args) => singleExpression。

此外，您需要使用分号;，而不是逗号来终止语句。

正如其他人指出的那样，您使用的语法(args) => { print("something"), somethingElse }实际上是创建一个集合（aSet<void>因为它的返回类型print是void）并返回它。

这是一场完美的小语法错误风暴，这对 JavaScript 程序员来说似乎是合理的，但在 Dart 中，它们实际上意味着完全不同的东西。而且，更糟糕的是，代码有效。集合文字将按顺序评估其表达式，无论如何没有人看到创建的集合。语法只是不能概括——你不能将任何表达式更改为，比如说，一个 for 循环（但是，你将能够在下一版本的 Dart 中这样做）。

所以，在 Dart 中，=> {除非你想返回一个集合或地图，否则不要使用。