将 FutureBuilder 与 setState 一起使用

Question

如何正确使用FutureBuilder 和setState？例如，当我创建一个有状态小部件时，它开始加载数据（FutureBuilder），然后我应该用新数据更新列表，所以我使用 setState，但它开始无限循环（因为我再次重建小部件），任何解决方案？

class FeedListState extends State<FeedList> {

  Future<Null> updateList() async {
    await widget.feeds.update();
    setState(() {
      widget.items = widget.feeds.getList();
    });
    //widget.items = widget.feeds.getList();
  }

  @override
  Widget build(BuildContext context) {
    return new FutureBuilder<Null>(
      future: updateList(),
      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return new Center(
              child: new CircularProgressIndicator(),
            );
          default:
            if (snapshot.hasError)
              return new Text('Error: ${snapshot.error}');
            else
              return new Scrollbar(
                child: new RefreshIndicator(
                  child: ListView.builder(
                    physics:
                        const AlwaysScrollableScrollPhysics(), //Even if zero elements to update scroll
                    itemCount: widget.items.length,
                    itemBuilder: (context, index) {
                      return FeedListItem(widget.items[index]);
                    },
                  ),
                  onRefresh: updateList,
                ),
              );
        }
      },
    );
  }
}

Answer 1

确实，它会循环到无穷大，因为每当调用build 时，也会调用updateList 并返回一个全新的未来。

您必须保持build 的纯净。它应该只是读取和组合变量和属性，但绝不会产生任何副作用！

---

另一个注意事项：StatefulWidget 子类的所有字段都必须是最终字段（widget.items = ... 不好）。更改的状态必须存储在State 对象中。

在这种情况下，您可以将结果（列表的数据）存储在将来本身，不需要单独的字段。从 future 调用 setState 甚至是危险的，因为 future 可能在处理状态后完成，并且会抛出错误。

下面是一些考虑到所有这些因素的更新代码：

class FeedListState extends State<FeedList> {
  // no idea how you named your data class...
  Future<List<ItemData>> _listFuture;

  @override
  void initState() {
    super.initState();

    // initial load
    _listFuture = updateAndGetList();
  }

  void refreshList() {
    // reload
    setState(() {
      _listFuture = updateAndGetList();
    });
  }

  Future<List<ItemData>> updateAndGetList() async {
    await widget.feeds.update();

    // return the list here
    return widget.feeds.getList();
  }

  @override
  Widget build(BuildContext context) {
    return new FutureBuilder<List<ItemData>>(
      future: _listFuture,
      builder: (BuildContext context, AsyncSnapshot<List<ItemData>> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return new Center(
            child: new CircularProgressIndicator(),
          );
        } else if (snapshot.hasError) {
          return new Text('Error: ${snapshot.error}');
        } else {
          final items = snapshot.data ?? <ItemData>[]; // handle the case that data is null

          return new Scrollbar(
            child: new RefreshIndicator(
              child: ListView.builder(
                physics: const AlwaysScrollableScrollPhysics(), //Even if zero elements to update scroll
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return FeedListItem(items[index]);
                },
              ),
              onRefresh: refreshList,
            ),
          );
        }
      },
    );
  }
}

Answer 2

使用可以在 Future Builders 或 Stream Builder 中使用 setState() 的 SchedulerBinding，

 SchedulerBinding.instance
                .addPostFrameCallback((_) => setState(() {
              isServiceError = false;
              isDataFetched = true;
            }));

Answer 3

屏幕截图（Null Safe）：

---

代码：

使用FutureBuilder 时不需要setState。

class MyPage extends StatefulWidget {
  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  // Declare a variable.
  late final Future<int> _future;

  @override
  void initState() {
    super.initState();
    _future = _calculate(); // Assign your Future to it. 
  }

  // This is your actual Future. 
  Future<int> _calculate() => Future.delayed(Duration(seconds: 3), () => 42);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<int>(
        future: _future, // Use your variable here (not the actual Future)
        builder: (_, snapshot) {
          if (snapshot.hasData) return Text('Value = ${snapshot.data!}');
          return Text('Loading...');
        },
      ),
    );
  }
}