Question

我想检查后端数据库中是否已存在电子邮件。因此，我尝试使用应在异步调用返回后更改的状态var。我发现以下包含已接受答案的线程。

Flutter - Async Validator of TextFormField

Flutter firebase validation of form field inputs

我尝试了这些答案以及一些变体，但它仍然对我不起作用。我只是模拟后端调用。将_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()) {}
                },
              )
            ],
          ),
        ))));
  }
}

Answer 1

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

checkEmail正是这个同步功能。它设置了一个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);
  });
}

debounce这个功能是个好主意，这样您就不会在用户键入的每个字母上都发出请求了！

关于Flutter / Dart中的异步编码，这是不错的video和一些docs。

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

1 个答案: