FutureBuilder 完全没有反应

如何解决FutureBuilder 完全没有反应

我的流程如下。屏幕只有两个元素 - TextFormField 和一个 ElevatedButton。

从用户那里获取电子邮件地址
用户点击按钮
按钮验证输入，然后
调用 FutureBuilder，其中
尝试从 REST API 获取客户端记录
重定向到适当的路由

这是我的第一个 Flutter/Dart 程序仅供参考，所以我可能犯了一个初学者的错误。

问题：FutureBuilder 的第一行没有执行。没有错误，没有消息，什么都没有。为什么会发生这种情况？

用户输入电子邮件地址，点击按钮，fetchClientInfo 函数被执行，它返回一个 Future<ClientInfo>，就是这样。

你能帮忙吗？

@override
Widget build(BuildContext context) {
  final _formKey = GlobalKey<FormState>();

  return Scaffold(
      appBar: AppBar(
        title: Text("Register Profile"),),body: Form(
          key: _formKey,child: Column(
              mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [
                Padding(
                    padding: EdgeInsets.all(20),child: TextFormField(
                      controller: emailController,validator: (email) {
                        if (email.isEmpty) {
                          return 'Please enter your email address.';
                        } else if (!EmailValidator.validate(email)) {
                          return 'Please enter a valid email address.';
                        }
                        return null;
                      },decoration: InputDecoration(
                        border: new UnderlineInputBorder(borderSide: new BorderSide(color: Colors.red)),labelText: 'Email',hintText: 'Enter your email address',contentPadding: EdgeInsets.all(20.0),)),ElevatedButton(
                    onPressed: () => {
                          if (_formKey.currentState.validate())
                            {
                              FutureBuilder<ClientInfo>(
                                future: fetchClientInfo(emailController.text),builder: (BuildContext context,snapshot) {
                                  print("here");
                                  if (snapshot.data.outcome) {
                                    return Text("main screen");
                                  } else if (!snapshot.data.outcome) {
                                    Navigator.push(
                                        context,MaterialPageRoute(
                                            builder: (context) =>
                                                RegisterNewUser(emailAddress: emailController.text)));
                                  } else if (snapshot.hasError) {
                                    return Text("${snapshot.error}");
                                  }

                                  // Show a spinner
                                  return CircularProgressIndicator();
                                },)
                            }
                        },child: Text(
                      "Check Email",))
              ])));
}

Future<ClientInfo> fetchClientInfo(String emailAddress) async {
  var url = Uri.https(APIAccess.baseAPIURL,APIAccess.pathToClientAPI,{
    'client_id': '$emailAddress','action': 'info','key': '${APIAccess.key}'
  });

  final response = await http.get(url);

  if (response.statusCode == 200) {
    return ClientInfo.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load album');
  }
}

解决方法

您缺少一些东西：

return 语句（在您的 lambda 中，您正在创建一个 FutureBuilder，但未在任何地方使用）

if(true) {
  return SizedBox.shrink();
}

正确的 lambda 语法（好吧，从技术上讲它是正确的，但它没有做你想要的）：https://dart.dev/guides/language/language-tour#anonymous-functions

// that's how compiler sees it
Map<dynamic,dynamic> Function() foo = () => {
  
};

你所做的让我想起了 javascript，但在 dart lambdas 中看起来有点不同

return Button(
  onTap: () => doStuff(),);

return Button(
  onTap: () {
    doStuff();
  }
);

// and if you want to return a value from block lambda
return Builder(
  builder: (context) {
    return SizedBox.shrink();
  }
);

点击渲染小部件处理点击事件时，最好将调用重定向到处理业务逻辑的组件，并且只侦听小部件中的当前状态。

您想阅读的是状态管理。该主题是高度自以为是，因此您必须为自己选择适合您的解决方案。 https://flutter.dev/docs/development/data-and-backend/state-mgmt

我自己喜欢使用稍微修改过的 bloc 版本。您可以在此处找到“原始”版本：https://pub.dev/packages/flutter_bloc

一个新的事实上的状态管理标准是 Riverpod

如果您只是想让代码正常工作，请执行以下操作：

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {

  Future<ClientInfo?> clientInfo = Future.value(null);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () {
            setState(() {
              clientInfo = fetchClientInfo(emailController.text);
            });
          },child: _buildButtonContent(),),FutureBuilder<ClientInfo>(
          initialData: null,future: clientInfo,builder: (BuildContext context,snapshot) {
            if (snapshot.data == null) {
              return SizedBox.shrink();
            } else {
              return Text(snapshot.data.toString());
            }
          },)
      ],);
  }
}

FutureBuilder 完全没有反应

如何解决FutureBuilder 完全没有反应

解决方法

相关推荐