firebase - 从 firebase 检索时，字符串在离开 child 后返回 null

Question

我正在使用以下代码从 firebase 实时数据库获取数据到我的 flutter 应用程序中。

class homeScreen extends StatelessWidget{
   final DBRef = FirebaseDatabase.instance.reference();
   final String dataToFetch;
   String name;

...
   getData(name, dataToFetch);
...
   void getData(String name, String dataToFetch){
      DBRef.child("dataToFetch").once().then((DataSnapshot dataSnapShot){
         name = dataSnapShot.value;
         print("one $name");
   });
   print("two $name");
  }
}

我试过使用:

return name;

在 getData 和 DBRef.child 中。

我遇到的问题是 DBRef.child 准确地找到了我要查找的内容并在控制台“one”中打印出来。但是当离开 child 时字符串变为空，所以最后打印说“两个 NULL”。

我的问题是，我如何才能将正在检索的内容保留在 DBRef.child 中并将该值返回给我的其他代码？

更新

这是更新后的代码，感谢@danypata。

import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:firebase_core/firebase_core.dart';
import 'dart:async';

class homeScreenFam extends StatefulWidget{
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<homeScreenFam>{
  final DBRef = FirebaseDatabase.instance.reference();
  String name;

  @override
  void initState(){
    print("1: $name");
    super.initState();
    getData(name, "keyThatIWant");
    print("1.5: $name");
  }

  Widget build(BuildContext context){
    print("2: $name");
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xffe9e9e9),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Welcome $name!",
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }

  void getData(String name, String dataToFetch) async{
    DBRef.child(dataToFetch).once().then((DataSnapshot dataSnapShot){
      setState(() { // this will trigger the build method
        name = dataSnapShot.value;  // we update the new value.
        print("3: $name");
      });
      print("4: $name");
    });
    print("5: $name");
  }
}

问题依旧，看控制台输出即可。

Restarted application in 1 309ms.
I/flutter (26334): 1: null
I/flutter (26334): 5: null
I/flutter (26334): 1.5: null
I/flutter (26334): 2: null
I/flutter (26334): 3: <RightName>
I/flutter (26334): 4: <RightName>
I/flutter (26334): 2: null

如我们所见，1 显然应该为空，因为我们还没有名称。所以我们想要在以下地方，2,3,4,5。但只有 3 和 4 是 .

如果我在 DBRef.child 之前写“await”...那么我会得到以下输出

Restarted application in 1 269ms.
I/flutter (26334): 1: null
I/flutter (26334): 1.5: null
I/flutter (26334): 2: null
I/flutter (26334): 3: <RightName>
I/flutter (26334): 4: <RightName>
I/flutter (26334): 5: <RightName>
I/flutter (26334): 2: null

现在我们只缺少 1.5 和 2。我猜这与 void 有关。但我不确定，我错过了什么小东西？

更新 2

  void getData(String paramName, String dataToFetch) async{
    DBRef.child(dataToFetch).once().then((DataSnapshot dataSnapShot){
      setState(() { // this will trigger the build method
        paramName = dataSnapShot.value;  // we update the new value.
        print("3: $paramName");
      });
      print("4: $paramName");
    });
    print("5: $paramName");
  }
}

Answer 1

那是因为代码的异步执行，要修复它你必须等待执行。像这样:

void getData(String name, String dataToFetch) async{ // NOTE THE ASYNC HERE
    //use await to wait for async execution
    String value = await DBRef.child("dataToFetch").once().then((DataSnapshot dataSnapShot){
         name = dataSnapShot.value;
         print("one $name");
         return name;
   });
   print("two $value");
  }

更新如果你从 StatefullWidget 的状态调用这个方法，你应该如何实现它:

class _MyHomePageState extends State<MyHomePage> {
  String name; // this property will be updated by the getData

  @override
  void initState() {
    super.initState();
    getData(name, "theKeyYouWant"); // call getData in init state
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test App'),
      ),
      body: Text(name)
    );
  }


  void getData(String paramName, String dataToFetch) async {
    DBRef.child("dataToFetch").once().then((DataSnapshot dataSnapShot){
      setState(() { // this will trigger the build method
        name = dataSnapShot.value;  // we update the new value.
      });
    });
  }

}