Flutter中initState调用API无法加载用户列表问题求助

1. 未处理加载状态导致视觉误导 #

代码里定义了isloading变量，但MyBody完全没用到它。initState调用fetchdata时，请求是异步的，此时userlist还是空数组，页面直接显示"No user found"，哪怕请求还在进行中，用户会误以为加载失败。

2. 缺少网络请求异常处理 #

如果网络请求失败（无网络、接口错误等），代码不会重置isloading，也不会处理错误情况，导致状态一直异常，页面始终显示错误提示。

3. MyBody作为普通方法不符合规范 #

虽然MyBody能运行，但Flutter推荐用Widget类组织UI，这样更贴合框架的状态管理逻辑，也便于后续维护。

修改后的完整代码 #

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {
  List<dynamic> userlist = [];
  bool isloading = false;
  String? errorMessage; // 新增错误信息变量

  void fetchdata() async {
    setState(() {
      isloading = true;
      errorMessage = null; // 每次请求重置错误信息
    });
    try {
      var res = await http.get(
          Uri.parse('https://jsonplaceholder.typicode.com/posts'));

      if (res.statusCode == 200) {
        var jsondata = jsonDecode(res.body);
        setState(() {
          userlist = jsondata;
          isloading = false;
        });
      } else {
        setState(() {
          isloading = false;
          errorMessage = '请求失败，状态码：${res.statusCode}';
        });
      }
    } catch (e) {
      setState(() {
        isloading = false;
        errorMessage = '网络错误：${e.toString()}';
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: _buildBody(),
      ),
    );
  }

  Widget _buildBody() {
    if (isloading) {
      return const Center(child: CircularProgressIndicator()); // 显示加载动画
    }

    if (errorMessage != null) {
      return Center(child: Text(errorMessage!)); // 显示错误提示
    }

    return userlist.isNotEmpty
        ? Column(
            children: [
              const Text('List Of Users'),
              const SizedBox(height: 20),
              Expanded(child: ShowUser(userlist: userlist)),
            ],
          )
        : const Center(child: Text('No user found'));
  }
}

关键修改点说明 #

• 添加加载状态UI：请求进行中时显示CircularProgressIndicator，让用户明确知道应用正在加载数据。
• 新增异常捕获：用try-catch包裹网络请求，处理网络错误和接口异常，同步更新错误状态并提示用户。
• 规范UI方法：将MyBody改为_buildBody并指定返回Widget类型，符合Dart代码规范。
• 重置错误状态：每次发起请求时清空旧错误信息，避免干扰新请求的状态展示。

修改后应用启动时会自动加载数据，用户能看到加载状态，请求成功后显示列表，失败时也能看到具体错误原因，彻底解决页面不更新的问题。

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