Flutter 定时器触发setState但API最新响应不更新界面如何解决

• API请求仅执行了一次：你将http.get请求写在了定时器外部，只有initState触发getData时会发起一次API调用，定时器回调中只是反复解码、赋值第一次请求拿到的固定响应结果，并不会发起新的请求拉取最新接口数据，因此界面自然不会更新。你在控制台看到的打印实际上也是同一份旧数据，并非最新接口响应。
• 定时器时间单位配置错误：你使用了microseconds（微秒）作为时间单位，1000微秒仅等于1毫秒，相当于每秒会触发1000次setState，过高的刷新频率会阻塞UI线程，反而会导致界面无法正常响应更新。如果要实现每秒刷新一次，应该使用milliseconds（毫秒）作为单位，配置为Duration(milliseconds: 1000)。
• 未做定时器资源释放：页面销毁时定时器仍会持续运行，会引发内存泄漏问题。

将API请求逻辑移入定时器回调中，保证每次定时触发都会拉取最新的接口数据，同时修正时间单位、补充定时器释放逻辑，参考代码如下：

import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';

// 定义定时器变量存储实例，用于后续释放
Timer? _refreshTimer;
dynamic data;

Future<void> refreshData() async {
  // 每次触发都重新发起API请求拉取最新数据
  var response = await http.get(
    Uri.parse('https://www.api_endpoint.com'),
    headers: {
      'Accept':'application/json'
    }
  );
  // 确认请求成功后再更新状态
  if (response.statusCode == 200) {
    setState(() {
      data = json.decode(response.body);
      print(data);
    });
  }
}

@override
void initState() {
  super.initState();
  // 页面初始化时先拉取一次数据
  refreshData();
  // 启动每秒一次的定时刷新任务
  _refreshTimer = Timer.periodic(const Duration(milliseconds: 1000), (_) {
    refreshData();
  });
}

@override
void dispose() {
  // 页面销毁时主动取消定时器，避免内存泄漏
  _refreshTimer?.cancel();
  super.dispose();
}

补充注意：如果接口响应较慢，建议增加防抖逻辑，避免上一次请求还未返回就发起下一次请求，导致数据更新错乱。

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