Flutter中setState方法时而生效时而失效的问题排查与解决

1. 异步执行顺序不可控：你在initState里同时启动了createDatabase和createDatabase1两个异步任务，它们的执行顺序完全由Dart事件循环调度——哪怕你明确data1加载延迟10秒，实际运行中也可能出现getDataFromDatabase1的回调先触发setState的情况。如果此时data还未完成赋值，页面会停在加载状态；若调度出现异常，就会导致状态更新不及时，出现时而正常时而失效的问题。
2. 链式调用的赋值疏漏：从你贴的代码看，getDataFromDatabase()获取数据后，没有把返回的value赋值给data变量的逻辑——如果实际代码里也没做这一步，data会永远是null，页面自然一直显示加载圈；如果有赋值但没确保在setState前完成，也会导致状态更新时变量值未同步，出现不稳定的情况。
3. 嵌套三目运算符的逻辑隐患：这种嵌套写法可读性极差，很容易在条件判断时出现括号遗漏、逻辑歧义等问题，导致页面切换不符合预期。

1. 用async/await重构异步逻辑，确保赋值与状态更新顺序 #

注意initState不能直接加async，要在内部单独定义异步函数：

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

void _loadAllData() async {
  // 方式一：按顺序加载（先data再data1）
  await createDatabase();
  final fetchedData = await getDataFromDatabase();
  setState(() {
    data = fetchedData; // 确保赋值完成后再更新状态
  });

  await createDatabase1();
  final fetchedData1 = await getDataFromDatabase1();
  setState(() {
    data1 = fetchedData1;
  });

  // 方式二：并行加载两个任务，效率更高
  // await Future.wait([
  //   createDatabase().then((_) => getDataFromDatabase()).then(val => setState(() => data = val)),
  //   createDatabase1().then((_) => getDataFromDatabase1()).then(val => setState(() => data1 = val)),
  // ]);
}

2. 简化页面切换逻辑，避免嵌套三目 #

把body的判断逻辑改成更直观的写法：

body: data == null || data1 == null
    ? const Center(child: CircularProgressIndicator())
    : const Center(child: Text('Data imported successfully')),

或者用立即执行函数包裹的if-else，可读性更强：

body: () {
  if (data == null || data1 == null) {
    return const Center(child: CircularProgressIndicator());
  }
  return const Center(child: Text('Data imported successfully'));
}(),

3. 推荐使用FutureBuilder统一管理异步状态 #

用Future.wait合并两个异步任务，配合FutureBuilder让框架自动处理状态更新，彻底避免手动setState的时机问题：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: FutureBuilder(
      future: Future.wait([
        createDatabase().then((_) => getDataFromDatabase()),
        createDatabase1().then((_) => getDataFromDatabase1()),
      ]),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        if (snapshot.hasError) {
          return const Center(child: Text('加载失败'));
        }
        // 可通过snapshot.data[0]、snapshot.data[1]获取两个数据
        return const Center(child: Text('Data imported successfully'));
      },
    ),
  );
}

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