setState Dart/Flutter 中带有花括号的胖箭头符号

Question

我对 Dart/Flutter 非常陌生，我对 => 表示法感到困惑。文档说 => 表示法用作返回单个表达式的简写。

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

当我尝试在颤振应用程序中设置状态时，我的疑问就出现了。

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

现在，当我用 => 表示法更改 setState 方法时

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

上述两种方法都有效，即它们按预期设置状态。我所要做的就是在使用粗箭头符号时将分号更改为逗号。

这背后的逻辑是什么？粗箭头符号如何与包含多个表达式的花括号一起使用。

编辑

正如 Hemanth Raj 所说，=> 返回一个集合，包含 => 符号的代码段可以编写如下。

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

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

Answer 1

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

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

同样来自Dart 2.2 及以上，Set 可以定义为用逗号分隔的值括在{} 中，如文档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

注意：不建议使用这种以逗号分隔的函数调用返回集合的方法，除非您希望将 Set 作为结果返回，否则请不要使用它

---

回复编辑：

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

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

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

当您调用setState 时，下面的代码将被执行，它再次返回带有{ (result of print), (result of _product.add), } 的Set

() {
      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 } 的语法 不是 Dart 编写函数体的方式，你可以使用 (args) { statements } 或 (args) => singleExpression。

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

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

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

因此，在 Dart 中，切勿使用 => {，除非您想要返回一个集合或地图。