Flutter程序启动时API数据无法自动加载的解决方法咨询

问题根源 #

1. initState中调用的apiCall是异步函数，但你在调用后立刻执行setState，此时API请求还未完成，数据并未更新；
2. apiCall执行完毕后没有触发setState通知UI刷新；
3. 使用static变量存储状态不符合Flutter状态管理规范，容易引发状态污染。

修正方案 #

• 将异步数据获取逻辑封装为State类内的方法，确保数据返回后再调用setState更新UI；
• 把状态变量（placeList、networkObject）移到State类中，避免静态变量的副作用；
• 子组件需通过参数接收数据，确保数据更新时能同步刷新。

修改后的完整代码 #

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<Place> placeList = [];
  late PelakNetwork networkObject;

  @override
  void initState() {
    super.initState();
    networkObject = PelakNetwork();
    _fetchData(); // 启动时自动调用数据获取方法
  }

  // 异步获取数据并触发UI更新
  Future<void> _fetchData() async {
    final fetchedData = await networkObject.getData();
    setState(() {
      placeList = fetchedData;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(defaultPadding),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(
                height: 120,
                width: double.infinity,
                child: Category_List_home_widget(),
              ),
              const MyTextWidget(
                text: "جدیدترین ها",
              ),
              const SizedBox(height: 10),
              SizedBox(
                height: 251,
                width: double.infinity,
                child: TopLocation_widget(placeList: placeList), // 传递数据给子组件
              ),
              const SizedBox(height: 10),
              const MyTextWidget(
                text: 'جدید ترین ها',
              ),
              const SizedBox(height: 10),
              SizedBox(
                height: 251,
                width: double.infinity,
                child: TopLocation_widget(placeList: placeList), // 传递数据给子组件
              ),
              const SizedBox(height: 40),
              newLocationWidget(placeList: placeList), // 传递数据给子组件
            ],
          ),
        ),
      ),
    );
  }
}

额外说明 #

请确保你的TopLocation_widget、newLocationWidget等子组件已添加placeList参数，替换之前依赖静态变量的逻辑，这样数据更新后子组件才能同步刷新显示。

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