Flutter列表索引越界问题：initState中无法访问API返回元素

你的代码 #

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import '../data/monthly_cpi.dart';
import '../model/monthlycpi.dart';

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

  @override
  _MonthlyCPIListState createState() => _MonthlyCPIListState();
}

class _MonthlyCPIListState extends State<MonthlyCPIList> {
  List<MonthlyCPI> monthlyCPIList = [];

  void getMonthlyCPIfromApi() async {
    var url = Uri.parse('http://127.0.0.1:8000/');
    final response = await http.get(url);
    Iterable decoded_response = json.decode(response.body);
    monthlyCPIList = decoded_response.map((model) => MonthlyCPI.fromJson(model)).toList();
  }

  @override
  void initState() {
    super.initState();
    getMonthlyCPIfromApi();
    print(monthlyCPIList.elementAt(0).cpi_description);
  }
}

问题根源 #

核心是异步操作的执行顺序：

• getMonthlyCPIfromApi是异步方法，里面的http.get属于耗时的网络请求，await会暂停当前方法等待请求结果，但initState是同步方法——它调用getMonthlyCPIfromApi()后，不会等这个异步方法执行完，直接跳到下一行执行print。这时候monthlyCPIList还是初始化的空列表，访问索引0必然触发越界错误。
• 把print放在getMonthlyCPIfromApi末尾时，它是在await http.get之后执行的——此时网络请求完成，数据也解析并赋值给了列表，自然能正常访问元素。

修复方案 #

方案1：在异步方法内处理后续逻辑（简单场景推荐）

修改getMonthlyCPIfromApi，在数据加载完成后执行print，如果需要更新UI还要调用setState：

void getMonthlyCPIfromApi() async {
  var url = Uri.parse('http://127.0.0.1:8000/');
  final response = await http.get(url);
  Iterable decoded_response = json.decode(response.body);
  setState(() {
    monthlyCPIList = decoded_response.map((model) => MonthlyCPI.fromJson(model)).toList();
  });
  // 数据加载完成后再执行打印
  print(monthlyCPIList.elementAt(0).cpi_description);
}

@override
void initState() {
  super.initState();
  getMonthlyCPIfromApi();
  // 移除这里的print
}

方案2：使用FutureBuilder处理异步数据（UI渲染场景推荐）

如果需要基于加载的数据渲染UI，FutureBuilder是更规范的选择，它会自动处理异步请求的不同状态（加载中、成功、失败）：

class _MonthlyCPIListState extends State<MonthlyCPIList> {
  Future<List<MonthlyCPI>> getMonthlyCPIfromApi() async {
    var url = Uri.parse('http://127.0.0.1:8000/');
    final response = await http.get(url);
    Iterable decoded_response = json.decode(response.body);
    return decoded_response.map((model) => MonthlyCPI.fromJson(model)).toList();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<MonthlyCPI>>(
      future: getMonthlyCPIfromApi(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // 加载中状态
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          // 请求出错状态
          return Center(child: Text('请求失败: ${snapshot.error}'));
        } else if (snapshot.hasData && snapshot.data!.isNotEmpty) {
          // 数据加载成功
          print(snapshot.data!.elementAt(0).cpi_description);
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(snapshot.data![index].cpi_description),
              );
            },
          );
        } else {
          // 无数据状态
          return const Center(child: Text('暂无数据'));
        }
      },
    );
  }
}

关键提示 #

Flutter中异步操作（网络请求、文件读取等）不会阻塞主线程，所以同步方法（比如initState）不会等待异步方法完成。必须确保在异步操作完成后，再去访问依赖其结果的数据。

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