flutter - 使用 Flutter Hooks 库，当我尝试在 useEffect 中使用导航器时遇到了种族冲突

Question

Flutter Hooks使用效果文档

signupHelper.state.success我在我的 onSubmit 事件中调度了一个 API 请求，该请求具有变为 true的副作用。当成功 == true 时，我想导航到另一个屏幕。相反，我得到一个错误setState() or markNeedsBuild() called during build

我目前的解决方法是在导航前等待 50 毫秒，以确保没有进行重建。

我的代码看起来像这样

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import '../hooks/use_signup_helper.dart'


class SignupForm extends HookWidget {
  const SignupForm({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // this wraps useReducer and gives me access to state and dispatch
    final signupHelper = useSignupHelper();  

    useEffect(() {
     
      if (signupHelper.state.success) {
        
        // this is my workaround - delay 50 milliseconds to avoid rebuild conflict
        // Future<void>.delayed(const Duration(milliseconds: 50))
        //    .then((_) => Navigator.pushNamed(context, '/home'));
    
        Navigator.pushNamed(context, '/home'));
      }
      return null;
    }, [signupHelper.state.success]);

    return ... // UI goes here

Answer 1

我有同样的问题，我遇到了 wrap Navigator.pushwithFuture.microtask

    useEffect(() {
      if (condition) {
        Future.microtask(() async {
          PageResult result = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => NextPage(),
            ),
          );
          if (result == null) {
            Navigator.of(context).pop();
          } else {
            // ...
          }
        });
      }
      return;
    }, [value]);

Answer 2

看起来我们可以使用 ScheduleBinding 和 SchedulerPhase 类。它是这样导入的-

import 'package:flutter/scheduler.dart';

新的 useEffect 函数看起来像这样 -

    useEffect(() {
      if (signupHelper.state.success) {
        if (SchedulerBinding.instance.schedulerPhase != SchedulerPhase.idle)
          SchedulerBinding.instance.endOfFrame.then((_) {
            Navigator.pushNamed(context, '/home');
          });
        else
          Navigator.pushNamed(context, '/home');
      }
      return null;
    }, [signupHelper.state.success]);