Flutter Web中FutureBuilder复用后显示旧快照的问题排查

问题根源 #

1. FutureBuilder的快照缓存：FutureBuilder会保留上一次请求的快照数据，当新请求发起时，不会立刻清空旧数据，而是等新请求完成才切换，导致先显示旧内容再更新，加载状态被跳过。
2. didUpdateWidget的不足：你修改后在didUpdateWidget里更新了future，但这个操作不会触发FutureBuilder立刻重置状态，它还是会依赖旧快照直到新请求结束。
3. builder里的副作用：直接在FutureBuilder的builder方法中给_nameController赋值，会导致每次builder执行都覆盖输入框内容，干扰用户操作或页面状态。

解决办法 #

1. 手动管理加载状态 #

在状态类里加一个加载状态变量，主动控制加载UI的显示，不依赖FutureBuilder的快照：

class _EditSportViewState extends State<EditSportView> {
  late SportProvider sportProvider;
  late MenuProvider menuProvider;
  final GlobalKey<FormState> _keyForm = GlobalKey<FormState>();
  late TextEditingController _nameController;
  final List<GameModeEntity> selectedGameModes = [];
  Timer? _timer;
  
  late Future<List> _dataFuture;
  bool _isLoading = true; // 新增手动加载状态

  @override
  initState() {
    super.initState();
    sportProvider = Provider.of<SportProvider>(context, listen: false);
    menuProvider = Provider.of<MenuProvider>(context, listen: false);
    _nameController = TextEditingController();
    _dataFuture = _fetchData();
  }

  // 封装数据请求方法，手动控制加载状态
  Future<List> _fetchData() async {
    setState(() => _isLoading = true);
    final data = await Future.wait([
      sportProvider.getSport(GetSportRequest(widget.id)),
      sportProvider.getAllGameModes(),
    ]);
    setState(() => _isLoading = false);
    return data;
  }

  @override
  void didUpdateWidget(covariant EditSportView oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.id != widget.id) {
      _dataFuture = _fetchData(); // ID变化时重新请求
    }
  }

  // ... 其他方法不变
}

2. 修改FutureBuilder逻辑，优先显示手动加载状态 #

在build里先判断_isLoading，再用FutureBuilder处理数据，同时优化控制器赋值逻辑：

// 替换原FutureBuilder部分
child: _isLoading
    ? const Center(child: CircularProgressIndicator())
    : FutureBuilder<List>(
        future: _dataFuture,
        builder: (context, snapshot) {
          if (snapshot.hasData && !snapshot.data!.any((element) => element == null)) {
            SportEntity sport = snapshot.data![0];
            // 仅当数据不同时更新控制器，避免重复赋值
            if (_nameController.text != sport.name) {
              _nameController.text = sport.name;
            }
            
            List<GameModeEntity> gameModes = snapshot.data![1];
            // 优化游戏模式选中状态，仅数据变化时更新
            final selectedIds = sport.gameModes!.map((e) => e.id).toSet();
            final newSelected = gameModes.where((gm) => selectedIds.contains(gm.id)).toList();
            if (!listEquals(selectedGameModes, newSelected)) {
              setState(() {
                selectedGameModes.clear();
                selectedGameModes.addAll(newSelected);
              });
            }

            return Form(
              // ... 原Form内容不变
            );
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),

注意：需要导入package:flutter/foundation.dart来使用listEquals方法做列表比较。

3. 额外优化建议 #

• 别在FutureBuilder的builder里做修改状态、控制器这类副作用操作，尽量把这些逻辑放在数据请求的回调里。
• 可以考虑用Provider的Consumer监听数据变化，替代FutureBuilder，这样能更好地利用状态管理的优势，避免页面复用的状态问题。

内容的提问来源于stack exchange，提问作者l.diazborg