Flutter：Future回调中调用setState无法更新视图的问题求助

嘿，我来帮你捋清楚这个问题的根源和解决办法～

你遇到的setState无法更新视图的问题，主要有两个核心原因：

1. 每次build都会重置状态：你在build方法里直接初始化了bodyContent = [menu]，当setState触发重新build时，这个列表会被重新创建，之前通过then添加的Image组件直接被清空了，相当于白加了。
2. 异步操作的时机问题：你在build里调用getphotos，每次build都会发起新的API请求，而且body变量是在build里提前创建好的，即使你修改了bodyContent，已经赋值给body的Column是旧的实例，后续build又会生成新的Column，但因为bodyContent被重置，还是看不到图片。

下面给你两种可行的解决方案，其中第二种是更符合Flutter最佳实践的方式：

方案一：将异步请求移到initState，维护State级别的列表 #

把bodyContent变成State的成员变量，在initState里初始化菜单和发起请求，这样只会执行一次，避免重复操作：

class AnimalDetailsPage extends StatefulWidget {
  final selection;

  _AnimalDetailsPage createState() => new _AnimalDetailsPage();

  AnimalDetailsPage({Key key, this.selection}) : super(key: key);
}

class _AnimalDetailsPage extends State<AnimalDetailsPage> {
  // 把bodyContent作为State的成员变量，避免每次build重置
  List<Widget> bodyContent = [];

  @override
  void initState() {
    super.initState();
    // 初始化菜单组件
    bodyContent.add(MyMenuBar());
    // 如果有选中的马匹，发起API请求
    if (widget.selection != null) {
      final horse = widget.selection;
      getphotos(horse['id'].toString()).then((res) {
        setState(() {
          // 成功获取数据后，添加图片到列表
          bodyContent.add(Image.network(res[0]['image']));
        });
      });
    }
  }

  Future<List> getphotos(horseId) async {
    http.Response response = await http.get(
      Uri.encodeFull("http://myhorses.com/api/getHorsePhotos?horse_id=" + horseId));
    return JSON.decode(response.body);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: bodyContent,
      ),
    );
  }
}

方案二：使用FutureBuilder（推荐） #

Flutter提供了FutureBuilder组件专门处理异步请求的UI更新，它会自动监听Future的状态（加载中、成功、失败），不需要手动调用setState，代码更简洁健壮：

class AnimalDetailsPage extends StatefulWidget {
  final selection;

  _AnimalDetailsPage createState() => new _AnimalDetailsPage();

  AnimalDetailsPage({Key key, this.selection}) : super(key: key);
}

class _AnimalDetailsPage extends State<AnimalDetailsPage> {
  // 把Future存为State成员，避免每次build重新发起请求
  Future<List> _photosFuture;

  @override
  void initState() {
    super.initState();
    // 初始化请求Future，只执行一次
    if (widget.selection != null) {
      final horse = widget.selection;
      _photosFuture = getphotos(horse['id'].toString());
    }
  }

  Future<List> getphotos(horseId) async {
    http.Response response = await http.get(
      Uri.encodeFull("http://myhorses.com/api/getHorsePhotos?horse_id=" + horseId));
    return JSON.decode(response.body);
  }

  @override
  Widget build(BuildContext context) {
    final menu = MyMenuBar();
    List<Widget> bodyContent = [menu];

    // 如果有请求任务，添加FutureBuilder处理异步UI
    if (_photosFuture != null) {
      bodyContent.add(FutureBuilder<List>(
        future: _photosFuture,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // 数据加载成功，显示图片
            return Image.network(snapshot.data[0]['image']);
          } else if (snapshot.hasError) {
            // 加载失败，显示错误提示
            return Padding(
              padding: EdgeInsets.all(16),
              child: Text("Failed to load horse photo"),
            );
          }
          // 加载中，显示加载指示器
          return Padding(
            padding: EdgeInsets.all(16),
            child: CircularProgressIndicator(),
          );
        },
      ));
    }

    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: bodyContent,
      ),
    );
  }
}

额外提醒 #

• 不要在build方法里发起异步请求：build会因为多种原因频繁触发（比如屏幕旋转、父组件更新），直接在build里请求会导致重复调用API，浪费资源还可能引发异常。
• FutureBuilder的Future要提前初始化：把Future放在initState里创建，不要在build方法里直接写future: getphotos(...)，否则每次build都会生成新的Future，导致组件无限刷新。

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