Flutter中fromJson方法执行时模型出现无限循环问题排查

问题描述 #

尝试从API获取文章数据，已定义包含fromJson工厂方法的Article模型，在有状态组件中通过FutureBuilder加载数据时，始终显示"No article data."。确认API返回正确JSON，但执行return body.map<Article>(Article.fromJson(body)).toList()时程序异常，导致Future无法完成。

相关代码如下：

Article模型的fromJson方法 #

factory Article.fromJson(Map<String, dynamic> json) {
  return Article(
    id: json['id'] ?? '',
    title: json['title'] ?? '',
    url: json['url'] ?? '',
    imageUrl: json['imageUrl'] ?? '',
    newsSite: json['newsSite'] ?? '',
    summary: json['summary'] ?? '',
    publishedAt: json['publishedAt'] ?? '',
    updatedAt: json['updatedAt'] ?? '',
    isFavourite: false,
  );
}

获取数据的代码 #

late Future<List<Article>> futureArticles;

@override
void initState() {
  super.initState();
  futureArticles = getArticles();
}

static Future<List<Article>> getArticles() async {
  const articlesUrl = "https://api.spaceflightnewsapi.net/v3/articles";
  final response = await http.get(Uri.parse(articlesUrl));

  if (response.statusCode == 200) {
    final body = json.decode(response.body);
    return body.map<Article>(Article.fromJson(body)).toList();
  } else {
    throw Exception('Failed to load album');
  }
}

@override
Widget build(BuildContext context) {
  return Center(
    child: FutureBuilder<List<Article>>(
      future: futureArticles,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        } else if (snapshot.hasData) {
          final articles = snapshot.data!;
          return buildArticles(articles);
        } else {
          return const Text("No article data.");
        }
      },
    ),
  );
}

问题原因 #

核心错误出在map方法的使用逻辑上：

• body是API返回的JSON数组（即List<Map<String, dynamic>>），map方法需要接收一个回调函数，该函数会被传入数组中的每一个单个元素（Map<String, dynamic>对象）。
• 当前代码直接把整个数组body传给Article.fromJson，但fromJson方法期望的参数是单个Map对象，这种错误调用会导致解析失败，进而触发异常，让Future<List<Article>>进入失败状态，最终FutureBuilder的snapshot.hasData为false，显示"No article data."。

修复方案 #

将map的回调函数修改为遍历单个元素并转换的形式：

return body.map<Article>((item) => Article.fromJson(item)).toList();

或者利用Dart函数传递特性的简洁写法：

return body.map<Article>(Article.fromJson).toList();

这样map会遍历数组中的每个元素，将单个Map对象传入Article.fromJson，正确转换为Article实例，最终生成List<Article>返回给FutureBuilder。

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