flutter - 如何仅在 FutureBuilder 获取 snapshot.data 后加载列表?
问题描述
我有一个 JSON 方法,List
它在完成后返回一个,
Future<List<Feed>> getData() async {
List<Feed> list;
String link =
"https://example.com/json";
var res = await http.get(link);
if (res.statusCode == 200) {
var data = json.decode(res.body);
var rest = data["feed"] as List;
list = rest.map<Feed>((json) => Feed.fromJson(json)).toList();
}
return list;
}
然后我调用它,initState()
其中包含一个列表 hello,它将过滤掉 JSON 列表,但它null
首先在屏幕上显示一个列表,几秒钟后它加载列表。
getData().then((usersFromServer) {
setState(() {. //Rebuild once it fetches the data
hello = usersFromServer
.where((u) => (u.category.userJSON
.toLowerCase()
.contains('hello'.toLowerCase())))
.toList();
users = usersFromServer;
filteredUsers = users;
});
});
这是我在方法FutureBuilder
中调用的build()
方法,但是如果我在 return 语句之前提供 hello 列表,它表明该方法where()
是在 null 上调用的(我用来过滤的列表方法hello()
)
FutureBuilder(
future: getData(),
builder: (context, snapshot) {
return snapshot.data != null ?
Stack(
children: <Widget>[
CustomScrollView(slivers: <Widget>[
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
child: puzzle[0],
);
},
childCount: 1,
),
)
]),
],
)
:
CircularProgressIndicator();
});
解决方案
您正在多次调用 getData 方法。不要那样做。您的 UI 等待一个呼叫,而您的代码等待另一个呼叫。那是一团糟。调用一次并等待该调用。
您需要定义在您的状态下等待的未来:
Future<void> dataRetrievalAndFiltering;
然后在您的 中initstate
,将整个操作分配给这个未来:
(请注意,我完全删除了 setState,这里不再需要它了)
dataRetrievalAndFiltering = getData().then((usersFromServer) {
hello = usersFromServer.where((u) => (u.category.userJSON.toLowerCase().contains('hello'.toLowerCase()))).toList();
users = usersFromServer;
filteredUsers = users;
});
现在您FurtureBuilder
实际上可以等待特定的未来,而不是通过再次调用您的方法生成的新未来:
FutureBuilder(
future: dataRetrievalAndFiltering,
builder: (context, snapshot) {
现在你有一个未来,你可以等待。
推荐阅读
- spring-boot - 卡桑德拉 | 如何将当前数据集与之前的数据集进行比较?
- javascript - React:如何将特定数据发送到使用 .map 创建的组件的特定实例
- ruby - 如何将 json 主体从 ruby 传递到 bash 脚本
- ionic3 - Ionic 3:错误消息:“预期的类型来自属性 'message',它在类型 'ToastOptions' 上声明”
- rxjs - 在可观察序列中交替
- firebase - Firebase ML Kit 使用什么协议?
- sql - 从列中的值不为空的 self 表更新表
- azure - 使用 Azure 应用服务(Web 应用)诊断日志创建应用程序日志不会触发 blob 创建事件
- python-2.7 - Python 多个维恩图堆叠在一张图像中
- algorithm - 将组的偏好与单个结果匹配的算法?