Flutter中FutureBuilder触发无意义API请求的问题求助

你的推测完全正确——键盘弹出/收起、弹窗显示都会触发组件重建，而你直接在FutureBuilder的future参数里调用APIs().getStudentDetails()，每次build都会重新执行这个方法，导致重复发起GET请求。

核心解决方案：把Future对象提前初始化，避免每次build都重新创建 #

1. 在State类中存储Future对象
   不要在build方法里直接创建Future，而是在State的成员变量中定义，然后在initState里初始化，这样Future只会执行一次（除非你手动触发刷新）。

2. 编辑成功后手动刷新数据
   当你完成编辑并保存成功后，再重新赋值Future变量，触发页面刷新和新的API请求。

修改后的代码示例 #

class YourPageState extends State<YourPage> {
  // 定义Future成员变量
  late Future<List<StudentDetails>> _studentFuture;

  @override
  void initState() {
    super.initState();
    // 在initState中初始化Future，只执行一次
    _studentFuture = APIs().getStudentDetails();
  }

  // 编辑弹窗的保存方法示例（假设你有这个方法）
  void saveEdit(String id, String newName, ...) async {
    // 执行PUT请求
    await APIs().updateStudentDetails(id, newName, ...);
    // 保存成功后，重新获取数据，触发页面刷新
    setState(() {
      _studentFuture = APIs().getStudentDetails();
    });
    // 关闭弹窗和确认对话框
    Navigator.pop(context);
    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('修改成功')));
  }

  @override
  Widget build(BuildContext context) {
    return // 你的页面其他代码
      child: FutureBuilder(
        // 使用提前初始化的Future变量
        future: _studentFuture,
        builder: (context, data) {
          if (data.hasError) {
            return Padding(
                padding: const EdgeInsets.all(8),
                child: Center(child: Text("${data.error}")));
          } else if (data.hasData) {
            var studentData = data.data as List<StudentDetails>;
            return Padding(
              padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
              child: SingleChildScrollView(
                child: SizedBox(
                  height: MediaQuery.of(context).size.height * 0.9,
                  child: ListView.builder(
                    itemCount: studentData.length,
                    itemBuilder: ((context, index) {
                      final student = studentData[index];
                      final id = student.studentId;
                      final father = student.fatherName;
                      final mother = student.motherName;
                      final cg = student.cg;
                      final cityName = student.city;
                      final studentName = student.studentName;
                      return SizedBox(
                        child: Padding(
                          padding: const EdgeInsets.all(30.0),
                          child: SingleChildScrollView(
                            child: GestureDetector(
                              onDoubleTap: () {
                                edit(context, id!, studentName!, father,
                                    mother, cg, cityName!);
                              },
                              child: Column(children: [
                                CustomReadOnlyField(
                                    hintText: id.toString()),
                                CustomReadOnlyField(hintText: studentName),
                                CustomReadOnlyField(hintText: father),
                                CustomReadOnlyField(hintText: mother),
                                CustomReadOnlyField(
                                    hintText: cg.toString()),
                                CustomReadOnlyField(hintText: cityName),
                              ]),
                            ),
                          ),
                        ),
                      );
                    }),
                    scrollDirection: Axis.vertical,
                  ),
                ),
              ),
            );
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    // 页面其他代码
  }
}

为什么这样有效？ #

• initState是State生命周期中只执行一次的方法，在这里初始化Future，确保API请求只会在页面首次加载时发起一次。
• 后续组件重建时，FutureBuilder使用的是同一个已完成或正在执行的Future对象，不会重复调用API。
• 只有当编辑成功后，我们手动通过setState重新赋值Future，才会再次发起GET请求，更新页面数据。

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