Flutter异步请求后setState时机及货币切换价格同步问题

核心问题 #

1. 异步请求未等待完成就更新界面：getCryptoPrices中用forEach执行异步网络请求，但forEach不会等待每个请求完成，你调用getCryptoPrices后立刻执行setState，此时cryptoItemPrice还没被新数据填充，导致界面显示旧值，出现滞后。
2. 滚动判断逻辑有误：onSelectedItemChanged会在滚动过程中多次触发，依赖endOfScroll的判断不仅冗余，还会导致状态更新时机错误；同时滚动停止后endOfScroll未重置，可能引发重复触发。
3. 初始化时状态更新过早：initState中调用getCryptoPrices后立刻setState，此时异步请求尚未返回，无法加载初始最新数据。

具体修复步骤 #

1. 重构异步请求逻辑，等待所有请求完成

将getCryptoPrices改为异步函数，使用Future.wait等待所有网络请求结束，确保cryptoItemPrice完全更新后再进行界面更新：

Future<void> getCryptoPrices() async {
  // 遍历所有加密货币，生成请求Future列表
  final requestFutures = cryptoList.keys.map((crypto) async {
    final url = '$kCoinIoApiUrl$crypto/$currency?apikey=$kCoinIoApiKeyER';
    final networkHelper = NetworkHelper(url: url);
    final priceData = await networkHelper.getData();

    if (priceData != null) {
      final rate = priceData['rate'] as double;
      cryptoItemPrice[crypto] = rate.toStringAsFixed(8);
    } else {
      cryptoItemPrice[crypto] = '-1';
    }
  });

  // 等待所有请求完成
  await Future.wait(requestFutures);
}

2. 修正滚动选择后的状态更新逻辑

去掉endOfScroll变量，直接在滚动结束的通知中处理请求更新，避免滚动过程中多次触发：

// 替换原NotificationListener部分
NotificationListener<ScrollNotification>(
  onNotification: (scrollNotification) {
    if (scrollNotification is ScrollEndNotification) {
      // 获取Picker当前选中的索引
      final picker = scrollNotification.widget as CupertinoPicker;
      final selectedIndex = picker.scrollController?.selectedItem ?? 19;
      currency = currenciesList[selectedIndex];
      // 执行请求并更新界面
      _updatePrices();
    }
    return true;
  },
  child: CupertinoPicker(
    scrollController: FixedExtentScrollController(initialItem: 19),
    backgroundColor: Colors.black87,
    itemExtent: 20,
    // 仅在滚动过程中更新currency，不触发请求
    onSelectedItemChanged: (index) {
      currency = currenciesList[index];
    },
    children: getCurrency(),
  ),
)

3. 添加统一的更新方法，确保状态更新时机正确

新增_updatePrices方法，等待请求完成后再调用setState：

Future<void> _updatePrices() async {
  await getCryptoPrices();
  setState(() {});
}

4. 修正初始化逻辑

在initState中调用_updatePrices，确保初始数据加载完成后再更新界面：

@override
void initState() {
  super.initState();
  currency = 'USD';
  _updatePrices();
}

修复逻辑说明 #

• 使用Future.wait确保所有网络请求完成后再更新数据，避免因异步顺序问题导致的旧数据展示。
• 直接在ScrollEndNotification中处理更新，确保只有当用户滚动选择完成后才触发请求，避免无效的重复请求。
• 将状态更新逻辑统一到_updatePrices，保证每次数据更新后都会正确触发界面重构。

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