flutter - 颤振中的异步验证仍然存在问题

问题描述

我喜欢检查我后端的数据库中是否已经存在电子邮件。因此，我尝试使用在异步调用返回后应该更改的状态变量。我找到了以下包含已接受答案的线程。

我尝试了这些答案以及一些变化，但它仍然对我不起作用。我只是模拟后端调用。打印设置 _emailExist 为 true，但我没有看到任何错误。如果我单击该按钮两次，则错误消息将正确显示。

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  LoginPage({Key key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final GlobalKey<FormState> _loginFormKey = GlobalKey<FormState>();
  bool _emailExist = false;

  @override
  initState() {
    super.initState();
  }

  checkEmail(String name) {

    // Simulare async call
    Future.delayed(Duration(seconds: 2)).then((val) {
      setState(() {
        _emailExist = true;
      });
      print(_emailExist);
    });
    return _emailExist;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Test"),
        ),
        body: Container(
            child: SingleChildScrollView(
                child: Form(
          key: _loginFormKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                validator: (value) =>
                checkEmail(value) ? "Email already taken" : null,
              ),
              RaisedButton(
                child: Text("Login"),
                onPressed: () {
                  if (_loginFormKey.currentState.validate()) {}
                },
              )
            ],
          ),
        ))));
  }
}

标签： flutterdart

TextFormField需要一个同步函数作为验证器（这是一个执行某些任务然后返回其结果的普通函数）。

checkEmail正是这个，一个同步函数。它设置了 a Future，它将在两秒钟内设置_emailExist为true。但至关重要的是，它不会等待两秒钟。它立即返回_emailExist（这是false它第一次运行）的当前值。两秒钟后，您的Future解析并设置_emailExist为 true。这就是为什么当您第二次运行它时，它会按预期工作（_checkEmail再次返回当前值，_emailExist但这就是现在true）。

解决此问题的一种方法是提供onChanged和decoration参数以达到相同的效果：

TextFormField(
  onChanged: _handleChange,
  decoration: InputDecoration(
    errorText: _emailExist ? "Email already taken" : null,
  ),
),

现在，您可以在文本字段更改时进行异步后端调用，然后根据响应更新状态：

void _handleChange(String val) {
  Future.delayed(Duration(seconds: 2)).then(() {
    setState(() {
      _emailExist = true;
    });
    print(_emailExist);
  });
}

消除此功能是个好主意，这样您就不会在用户键入的每个字母中都发送请求！

这是一个很好的视频和一些关于 Flutter/Dart 中异步编码的文档。

flutter - 颤振中的异步验证仍然存在问题

问题描述

解决方案

推荐阅读