Flutter API集成调用接口拉取数据仅返回null问题求助

问题排查&修复方案 #

核心问题1：Item类的fromMap构造函数写法完全错误 #

你当前的Item.fromMap是命名构造函数，但函数内部只是创建了一个临时的Item对象，没有把解析后的值赋值给当前实例的字段，导致所有解析出来的Item对象字段全是默认的null。

核心问题2：packagescors字段解析字段名错误 #

你判断map["packagescors"]不为空后，错误取了map["device_details"]字段解析，必然导致解析失败或者字段为空。

核心问题3：请求&解析逻辑没有加任何空校验和异常捕获 #

你直接硬取json.decode(response.body)['data']['items']，如果请求状态码非200、返回结构缺少data字段、缺少items字段，都会直接抛出异常，导致函数执行中断，返回空或者异常，看起来就像请求返回null。

其他优化点 #

initState中循环调用setState没有必要，拿到全部数据后赋值一次即可。

修复代码示例 #

1. 修复Item类的fromMap构造函数

// 改成factory构造函数写法，正确返回解析后的Item对象
factory Item.fromMap(Map<String, dynamic> map) => Item(
  sequenceno: map["sequenceno"],
  id: map["_id"],
  chapter: map["chapter"],
  title: map["title"],
  packageDescription: map["package_description"],
  // 加空判断避免age_level为空时报错
  ageLevel: map["age_level"] != null ? List<int>.from(map["age_level"].map((x) => x)) : null,
  pkgSequence: map["pkg_sequence"],
  // 修复字段名错误，把device_details改成packagescors
  packagescors: map["packagescors"] != null
      ? List<Packagescors>.from(
          map["packagescors"].map((x) => Packagescors.fromMap(x)))
      : [],
);

2. 修复http_mixin的请求逻辑，增加校验和异常捕获

Future<List<Item>> getmoduleList(String userId, String accountId) async {
  try {
    final queryParameters ={
      'subject':'Maths',
      'grade':'6'
    };  
    final response = await http.get(Uri.https(_baseUrl, "MY URI",queryParameters), headers: {
      'Content-Type': 'application/json',
      'user-id': userId,
      'account-id': accountId,
    });
    // 先判断请求状态码是否正常
    if (response.statusCode != 200) {
      print("请求失败，状态码：${response.statusCode}，返回内容：${response.body}");
      return [];
    }
    final resJson = json.decode(response.body);
    // 逐层校验字段是否存在
    if (resJson['data'] == null || resJson['data']['items'] == null) {
      print("返回结构异常，返回内容：${response.body}");
      return [];
    }
    List <Item> jsonresponse = List<Item>.from(resJson['data']['items'].map((e)=>Item.fromMap(e)));
    print("解析成功，共${jsonresponse.length}条数据");
    return jsonresponse;
  } catch (e, stack) {
    print("请求或解析出错：$e\n$stack");
    return [];
  }
}

3. 优化initState的逻辑，减少不必要的setState调用

@override
void initState() {
  super.initState();
  _dbHelper.getAllUserData().then((value)async{
    userdetails = value;
    if (value.isEmpty) return;
    var response = await getmoduleList(value[0].userId.toString(),value[0].accountId.toString());
    // 一次性赋值，只调用一次setState
    setState(() {
      modules = response;
    });
    // 测试打印
    if (modules.isNotEmpty) {
      print('Test Printing ${modules[0].pkgSequence}');
      print('Test Printing ${modules[0].id}');
    }
  });
}

修复完成后运行项目，查看控制台打印的日志，就能定位到具体是请求失败、返回结构异常还是解析错误的问题，按日志提示调整即可。

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