Flutter：如何在组件初始化时执行状态更新与导航逻辑，避免重复触发服务调用

我完全懂你现在的困扰——每次调用setState更新消息后，build方法会重新执行，导致AuthService.handleCallback被重复调用，不仅做了无用功还抛出异常，这确实很烦人。

问题的核心在于：build方法会在多种场景下被触发（状态变化、父组件重建、窗口尺寸改变等），绝对不能在里面放置带有副作用的逻辑（比如网络请求、服务调用）。正确的做法是把这种只需要执行一次的初始化逻辑放到initState方法里，它是State对象初始化时唯一执行一次的生命周期方法，完美适配你的需求。

下面是具体的解决方案：

步骤1：将认证逻辑移到initState #

我们可以创建一个异步方法来封装整个认证流程，然后在initState里调用它。同时要注意，在异步操作中导航前需要检查mounted属性，确保组件还没有被销毁，避免出现上下文失效的错误。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:testing/services/auth_service.dart';

class AuthenticatingScreen extends StatefulWidget {
  final String token;

  AuthenticatingScreen(this.token);

  @override
  State<AuthenticatingScreen> createState() => _AuthenticatingScreenState();
}

class _AuthenticatingScreenState extends State<AuthenticatingScreen> {
  // step 1) our default message
  String _message = 'Please wait while we log you in...';

  @override
  void initState() {
    super.initState();
    // 组件初始化时启动认证流程，只执行一次
    _initiateAuthFlow();
  }

  Future<void> _initiateAuthFlow() async {
    try {
      // step 2) get our oAuth token
      final accessCode = await AuthService.handleCallback(widget.token);

      // step 3) update our message
      if (mounted) { // 确保组件还存在再更新状态
        setState(() => _message = 'We\'re just getting your details');
      }

      // step 4) retrieve our user details and redirect away
      await _fetchUserDetails();

      if (mounted) { // 确保组件还存在再导航
        Navigator.of(context).pushNamedAndRemoveUntil(
          '/home',
          (Route<dynamic> route) => false,
        );
      }
    } catch (e) {
      // 这里可以添加错误处理逻辑，比如显示错误消息
      if (mounted) {
        setState(() => _message = '登录失败，请重试');
      }
    }
  }

  Future<void> _fetchUserDetails() {
    return Future.delayed(const Duration(seconds: 3), () {
      // ToDo: fetch user details from the server
    });
  }

  @override
  Widget build(BuildContext context) {
    // build方法现在只负责UI渲染，没有任何副作用逻辑
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Padding(
              padding: EdgeInsets.only(bottom: 20.0),
              child: CircularProgressIndicator(),
            ),
            Text(_message),
          ],
        ),
      ),
    );
  }
}

关键说明 #

1. initState的唯一性：这个方法只会在State对象创建时执行一次，彻底避免了重复调用服务的问题。
2. mounted检查：在异步操作中，组件可能在请求完成前就被销毁（比如用户返回上一页），此时调用setState或Navigator会报错，mounted属性可以帮我们判断组件是否还存活。
3. build方法的职责：现在build只负责根据当前状态渲染UI，符合Flutter的设计原则，让代码更清晰、更易维护。

另外你提到尝试用无状态组件的思路，其实无状态组件没有initState这类生命周期，反而不太适合这种需要一次性初始化+状态更新的场景，用有状态组件配合initState是最恰当的方案。

备注：内容来源于stack exchange，提问作者Chris