State.initState() must be a void method without an `async` keyword错误解析

文章目录

报错问题

复制代码
State.initState() must be a void method without an `async` keyword

如下图:

报错的代码

报错的代码如下:

dart 复制代码
  @override
  void initState() async{
    super.initState();
    await getConfig("exerciseMusic").then((value) => {_selectedExerciseMusic = value ?? '默认音乐'});
    await getConfig("restMusic").then((value) => {_selectedRestMusic = value ?? '默认音乐'});
    await getConfig("finishMusic").then((value) => {_selectedFinishMusic = value ?? '默认音乐'});
  }

错误原因

State.initState() 方法是 Flutter 中 StatefulWidget 类的生命周期方法之一,用于初始化小部件的状态。该方法必须是一个 void 方法,不能使用 async 关键字。这是因为 initState() 方法会在小部件创建后立即调用,负责初始化小部件的状态。而 async 关键字用于指示一个方法是异步的,这意味着它会返回一个 Future 对象,而不是立即完成。然而,initState() 方法不能是异步的,因为它必须在小部件的构建方法被调用之前完成。

解决方法

要解决此错误,需要从 initState() 方法中删除 async 关键字,并将任何异步操作放在单独的方法中。然后,可以从 initState() 方法中调用该单独的方法。

dart 复制代码
  Future<void> _loadData() async {
    // Perform asynchronous operations here
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      // Update state after asynchronous operations are complete
    });
  }

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

解析

Future _loadData() async 是一个异步函数,它会返回一个 Future 对象,并在将来某个时候完成。但是,在 initState() 方法中调用它时,不会阻塞主线程。这是因为 initState() 方法是在主线程中调用的,而异步函数是在后台线程中执行的。

当在 initState() 方法中调用 _loadData() 方法时,它会立即返回一个 Future 对象。然后,主线程会继续执行 initState() 方法的其余部分,并最终调用 build() 方法来构建小部件。

与此同时,异步函数 _loadData() 会在后台线程中执行。当它完成时,它会调用 setState() 方法来更新小部件的状态。这会导致小部件重新构建,并反映异步操作的结果。

因此,即使 _loadData() 是一个异步函数,也不会阻塞 initState() 方法或导致小部件延迟构建。这是因为异步函数是在后台线程中执行的,不会影响主线程。

修改后的代码如下:

dart 复制代码
Future<void> _loadData() async {
    // Perform asynchronous operations here
    // await Future.delayed(Duration(seconds: 2));
    await getConfig("exerciseMusic").then((value) =>
    {
      _selectedExerciseMusic = value ?? '默认音乐'
    });
    await getConfig("restMusic").then((value) =>
    {
      _selectedRestMusic = value ?? '默认音乐'
    });
    await getConfig("finishMusic").then((value) =>
    {
      _selectedFinishMusic = value ?? '默认音乐'
    });
    setState(() {
      // Update state after asynchronous operations are complete
    });
  }

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

这些修改就不会报错了。

另外的方法

这个场景获得的数据小,时间短也可以使用FutureBuilder来实现。

dart 复制代码
@override
Widget build(BuildContext context) {
  return FutureBuilder(
    future: doSomeAsyncStuff(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        // Future hasn't finished yet, return a placeholder
        return Text('Loading');
      }
      return Text('Loading Complete: ${snapshot.data}');
    }
  );
}

结束语

Flutter是一个由Google开发的开源UI工具包,它可以让您在不同平台上创建高质量、美观的应用程序,而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧,从UI设计到性能优化,欢饮关注一起讨论学习,共同进入Flutter的精彩世界!

相关推荐
zacksleo37 分钟前
鸿蒙Flutter开发故事:不,你不需要鸿蒙化
flutter·harmonyos
sukida10044 分钟前
Firefox 浏览器同步一个账户和书签网址
android·linux·firefox
每次的天空44 分钟前
Android 单例模式全解析:从基础实现到最佳实践
android·单例模式
Tsing7222 小时前
Android窗口Surface简介
android
诺亚凹凸曼2 小时前
23种设计模式-结构型模式-桥接器
android·java·设计模式
帅次2 小时前
Flutter DropdownButton 详解
android·flutter·ios·kotlin·gradle·webview
际宇人2 小时前
移动端APP阿里云验证码2.0接入实录
android
.又是新的一天.2 小时前
02_MySQL安装及配置
android·数据库·mysql
QING6183 小时前
Kotlin groupBy用法及代码示例
android·kotlin·源码阅读
QING6183 小时前
Kotlin getOrElse用法及代码示例
android·kotlin·源码阅读