Flutter双页应用接口触发setState更新后第二页无法读取最新状态是什么原因

• 核心原因是API请求为异步操作，你跳转第二页的时机早于请求完成、状态更新的时机：本地counter++是同步操作，执行完成后再跳转页面就能读到更新后的值；但你触发API请求后立刻跳转页面时，请求还在后台执行，setState还没被调用，状态变量还是初始值0，且ResultScreen是无状态组件，不会自动响应后续的状态变更刷新UI，所以页面一直显示初始值。
• 次要原因为你使用静态变量跨页面传递状态的写法不符合Flutter规范：静态变量和组件实例的状态是隔离的，如果你更新的是实例变量而非静态变量，第二页读取的静态变量永远不会被更新，就会出现取值不一致的问题。

方案1：调整跳转时机（快速修复） #

确保API请求完成、状态更新后再执行跳转操作，示例代码如下：

if (response.statusCode == 200) {
  print(response.data['user_count']);
  setState(() {
    machineCount = response.data['machine_count'];
    userCount = response.data['user_count'];
  });
  // 将跳转逻辑移到此处，保证状态更新完成后再打开第二页
  if (mounted) {
    Navigator.push(context, MaterialPageRoute(builder: (context) => const ResultScreen()));
  }
}

方案2：通过构造函数传参（推荐基础场景使用） #

抛弃静态变量传值的错误写法，将需要传递的参数通过第二页的构造函数传入，状态完全可控：

1. 改写ResultScreen定义，新增参数接收属性：

class ResultScreen extends StatelessWidget {
  final int userCount;
  final int id;
  final int machineCount;

  const ResultScreen({
    Key? key,
    required this.userCount,
    required this.id,
    required this.machineCount,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      '$userCount',
      style: Theme.of(context).textTheme.headline3,
    );
  }
}

2. 跳转时传入更新后的状态值：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => ResultScreen(
      userCount: userCount,
      id: id,
      machineCount: machineCount,
    ),
  ),
);

方案3：使用状态管理库（适合复杂场景） #

如果你的状态需要在多个页面共享、且需要状态更新后自动同步刷新所有关联页面，建议使用Provider、Riverpod等官方推荐的状态管理方案，从根源避免跨页面状态同步问题。

内容的提问来源于stack exchange，提问作者unacorn