flutter_bloc（事件处理程序正常完成后调用了emit

Question

因此，我正在使用 Django Rest 框架创建我的 API 等。我想检查是否可以从后端得到响应。所以，我能够得到回应。但我在调试控制台上看到了一些问题。请帮我找出问题所在。这是我在调试控制台上收到的信息。

Restarted application in 1,314ms.
I/flutter ( 1751): {"token":"0d15f2d45f11869174395d623c066080bd2ade52"}
E/flutter ( 1751): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: 'package:bloc/src/bloc.dart': Failed assertion: line 232 pos 7: '!_isCompleted':
E/flutter ( 1751):
E/flutter ( 1751):
E/flutter ( 1751): emit was called after an event handler completed normally.
E/flutter ( 1751): This is usually due to an unawaited future in an event handler.
E/flutter ( 1751): Please make sure to await all asynchronous operations with event handlers
E/flutter ( 1751): and use emit.isDone after asynchronous operations before calling emit() to
E/flutter ( 1751): ensure the event handler has not completed.
E/flutter ( 1751):
E/flutter ( 1751):   **BAD**
E/flutter ( 1751):   on<Event>((event, emit) {
E/flutter ( 1751):     future.whenComplete(() => emit(...));
E/flutter ( 1751):   });
E/flutter ( 1751):
E/flutter ( 1751):   **GOOD**
E/flutter ( 1751):   on<Event>((event, emit) async {
E/flutter ( 1751):     await future.whenComplete(() => emit(...));
E/flutter ( 1751):   });
E/flutter ( 1751):
E/flutter ( 1751): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39)
E/flutter ( 1751): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
E/flutter ( 1751): #2      _Emitter.call
E/flutter ( 1751): #3      new LoginFormBloc.<anonymous closure>.<anonymous closure>
E/flutter ( 1751): <asynchronous suspension>
E/flutter ( 1751):
Reloaded 1 of 746 libraries in 1,055ms.

这是我的源代码：

登录表单事件.dart

Restarted application in 1,314ms.
I/flutter ( 1751): {"token":"0d15f2d45f11869174395d623c066080bd2ade52"}
E/flutter ( 1751): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: 'package:bloc/src/bloc.dart': Failed assertion: line 232 pos 7: '!_isCompleted':
E/flutter ( 1751):
E/flutter ( 1751):
E/flutter ( 1751): emit was called after an event handler completed normally.
E/flutter ( 1751): This is usually due to an unawaited future in an event handler.
E/flutter ( 1751): Please make sure to await all asynchronous operations with event handlers
E/flutter ( 1751): and use emit.isDone after asynchronous operations before calling emit() to
E/flutter ( 1751): ensure the event handler has not completed.
E/flutter ( 1751):
E/flutter ( 1751):   **BAD**
E/flutter ( 1751):   on<Event>((event, emit) {
E/flutter ( 1751):     future.whenComplete(() => emit(...));
E/flutter ( 1751):   });
E/flutter ( 1751):
E/flutter ( 1751):   **GOOD**
E/flutter ( 1751):   on<Event>((event, emit) async {
E/flutter ( 1751):     await future.whenComplete(() => emit(...));
E/flutter ( 1751):   });
E/flutter ( 1751):
E/flutter ( 1751): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39)
E/flutter ( 1751): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
E/flutter ( 1751): #2      _Emitter.call
E/flutter ( 1751): #3      new LoginFormBloc.<anonymous closure>.<anonymous closure>
E/flutter ( 1751): <asynchronous suspension>
E/flutter ( 1751):
Reloaded 1 of 746 libraries in 1,055ms.

登录表单状态.dart

part of 'login_form_bloc.dart';

@freezed
class LoginFormEvent with _$LoginFormEvent {
  const factory LoginFormEvent.emailChanged(String emailStr) = _EmailChanged;
  const factory LoginFormEvent.passwordChanged(String passwordStr) =
      _PasswordChanged;
  const factory LoginFormEvent.loggedIn() = _LoggedIn;
}

登录表单块.dart

part of 'login_form_bloc.dart';

@freezed
class LoginFormState with _$LoginFormState {
  const factory LoginFormState({
    required EmailAddress emailAddress,
    required Password password,
    required bool isSubmitting,
    required bool showErrorMessages,
    required Option<Either<AuthFailure, TokenValue>> authFailureOrSuccessOption,
  }) = _LoginFormState;

  factory LoginFormState.initial() => LoginFormState(
        emailAddress: EmailAddress(''),
        password: Password(''),
        isSubmitting: false,
        showErrorMessages: false,
        authFailureOrSuccessOption: none(),
      );
}

该错误指向 LoggedIn 事件处理程序内的第二次发出。

Answer 1

我所要做的就是await在调用之前添加一个关键字event.map()并用async如下所示的标记该函数。另外，我明确提到了我的个人事件处理程序应该返回什么。在这种情况下，它是FutureOr<void>。

class LoginFormBloc extends Bloc<LoginFormEvent, LoginFormState> {
  LoginFormBloc(this._getAuthInfo) : super(LoginFormState.initial()) {
    on<LoginFormEvent>(
      (event, emit) async {
        await event.map<FutureOr<void>>(  // Added an await in this line
          emailChanged: (e) {
            emit(
              state.copyWith(
                emailAddress: EmailAddress(e.emailStr),
                authFailureOrSuccessOption: none(),
              ),
            );
          },
          passwordChanged: (e) {
            emit(
              state.copyWith(
                password: Password(e.passwordStr),
                authFailureOrSuccessOption: none(),
              ),
            );
          },
          loggedIn: (e) async {
            final isEmailValid = state.emailAddress.value.isRight();
            final isPasswordValid = state.password.value.isRight();

            Either<AuthFailure, TokenValue>? loginFailureOrSuccess;

            if (isEmailValid && isPasswordValid) {
              emit(
                state.copyWith(
                  isSubmitting: true,
                  authFailureOrSuccessOption: none(),
                ),
              );
              loginFailureOrSuccess = await _getAuthInfo(
                Params(
                  emailAddress: state.emailAddress,
                  password: state.password,
                ),
              );
            }
            emit(
              state.copyWith(
                isSubmitting: false,
                showErrorMessages: true,
                authFailureOrSuccessOption: optionOf(loginFailureOrSuccess),
              ),
            );
          },
        );
      },
    );
  }
  final GetAuthToken _getAuthInfo;
}

或者，我们也可以map用事件处理部分中的方法替换该方法when（我更喜欢在上面的场景中使用它map）。然后，代码将如下所示：

class LoginFormBloc extends Bloc<LoginFormEvent, LoginFormState> {
  LoginFormBloc(this._getAuthInfo) : super(LoginFormState.initial()) {
    on<LoginFormEvent>(
      (event, emit) async {
        await event.when<FutureOr<void>>(  // Replace map with when
          emailChanged: (emailStr) {  // Can directly pass String instead of _EmailChanged object
            emit(
              state.copyWith(
                emailAddress: EmailAddress(emailStr),  // Can directly pass emailStr as shown
                authFailureOrSuccessOption: none(),
              ),
            );
          },
          passwordChanged: (passwordStr) {
            emit(
              state.copyWith(
                password: Password(passwordStr),
                authFailureOrSuccessOption: none(),
              ),
            );
          },
          loggedIn: () async {
            final isEmailValid = state.emailAddress.value.isRight();
            final isPasswordValid = state.password.value.isRight();

            Either<AuthFailure, TokenValue>? loginFailureOrSuccess;

            if (isEmailValid && isPasswordValid) {
              emit(
                state.copyWith(
                  isSubmitting: true,
                  authFailureOrSuccessOption: none(),
                ),
              );
              loginFailureOrSuccess = await _getAuthInfo(
                Params(
                  emailAddress: state.emailAddress,
                  password: state.password,
                ),
              );
            }
            emit(
              state.copyWith(
                isSubmitting: false,
                showErrorMessages: true,
                authFailureOrSuccessOption: optionOf(loginFailureOrSuccess),
              ),
            );
          },
        );
      },
    );
  }
  final GetAuthToken _getAuthInfo;
}

注意：when来自冷冻包装。它不是 dart 语言的原生组件。