Flutter调用reqres.in API无数据显示问题求助

从jsonplaceholder API拉取数据并展示完全正常，但改用reqres.in的https://reqres.in/api/users?page=2接口，仅修改API地址和数据模型后，屏幕显示no data。已用Postman验证该API请求无异常，排除API本身问题，请求协助排查。

使用JsonPlaceHolder的项目 #

main.dart #

import 'package:flutter/material.dart';
import 'package:my_app/models/json_model.dart';

import 'service/api_service.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
    const MyApp({super.key});

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Material App',
            home: Scaffold(
                appBar: AppBar(
                    title: const Text('Json Deneme'),
                ),
                body: const Home(),
            ),
        );
    }
}

class Home extends StatefulWidget {
    const Home({super.key});

    @override
    State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
    List<JsonModel>? _postItems;
    bool _isLoading = false;
    String? _errorMessage;

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

    Future<void> loadData() async {
        setState(() {
            _isLoading = true;
            _errorMessage = null;
        });
        try {
            final postItems = await Api.fetchApi();
            setState(() {
                _postItems = postItems;
                _isLoading = false;
            });
        } catch (e) {
            setState(() {
                _isLoading = false;
                _errorMessage = 'Error fetching data: $e';
            });
        }
    }

    @override 
    Widget build(BuildContext context) {
        if (_isLoading) {
            return const Center(child: CircularProgressIndicator());
        } else if (_postItems == null || _postItems!.isEmpty) {
            return const Center(child: Text('No Data'));
        } else {
            return ListView.builder(
                itemCount: _postItems!.length,
                itemBuilder: (context, index) {
                    return ListTile(
                        title: Text(_postItems![index].name),
                    );
                },
            );
        }
    }
}

api_service.dart #

import 'dart:io';

import 'package:my_app/models/json_model.dart';
import 'package:dio/dio.dart';

class Api {
    static Future<List<JsonModel>?> fetchApi() async {
        final res = await Dio().get("https://jsonplaceholder.typicode.com/users");
        if (res.statusCode == HttpStatus.ok) {
            final data = res.data!;
            if (data is List) {
                return data.map((e) => JsonModel.fromMap(e)).toList();
            }
        }
        return <JsonModel>[];
    }
}

运行结果 #

使用reqres.in的项目 #

main.dart #

import 'package:flutter/material.dart';
import 'package:my_app/models/json_model.dart';

import 'service/api_service.dart'; 

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
    const MyApp({super.key});

    @override 
    Widget build(BuildContext context) {
        return MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Material App',
            home: Scaffold(
                appBar: AppBar(
                    title: const Text('Json Deneme'),
                ),
                body: const Home(),
            ),
        );
    }
}

class Home extends StatefulWidget {
    const Home({super.key});

    @override
    State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
    List<ReqresModel>? _postItems;
    bool _isLoading = false;
    String? _errorMessage;

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

    Future<void> loadData() async {
        setState(() {
            _isLoading = true;
            _errorMessage = null;
        });
    
        try {
            final postItems = await Api.fetchApi();
            setState(() {
                _postItems = postItems;
                _isLoading = false;
            });
        } catch (e) {
            setState(() {
                _isLoading = false;
                _errorMessage = 'Error fetching data: $e';
            }); 
        }
    }

    @override
    Widget build(BuildContext context) {
        if (_isLoading) {
            return const Center(child: CircularProgressIndicator());
        } else if (_postItems == null || _postItems!.isEmpty) { 
            return const Center(child: Text('No Data'));
        } else {
            return ListView.builder(
                itemCount: _postItems!.length,
                itemBuilder: (context, index) {
                    return ListTile(
                        title: Text(_postItems![index].data[index].firstName),
                    );
                },
            );
        }
    }
}

api_service.dart #

import 'dart:io';

import 'package:my_app/models/json_model.dart';
import 'package:dio/dio.dart';

class Api {
    static Future<List<ReqresModel>?> fetchApi() async {
        final res = await Dio().get("https://reqres.in/api/users?page=2");
        if (res.statusCode == HttpStatus.ok) {
            final data = res.data!;
            if (data is List) {
                return data.map((e) => ReqresModel.fromMap(e)).toList();
            }
        }
        return <ReqresModel>[];
    }
}

运行结果 #

核心问题 #

1. API返回结构不匹配：JsonPlaceholder直接返回用户数组，但reqres.in返回的是包含data字段的对象，当前代码判断data is List不成立，直接返回空列表。
2. 数据展示逻辑错误：main.dart中_postItems![index].data[index].firstName的索引逻辑错误，_postItems不应是ReqresModel列表，而是用户数据列表。

修复步骤 #

1. 修正api_service.dart解析逻辑 #

import 'dart:io';

import 'package:my_app/models/json_model.dart';
import 'package:dio/dio.dart';

class Api {
    static Future<List<ReqresModelData>?> fetchApi() async {
        final res = await Dio().get("https://reqres.in/api/users?page=2");
        if (res.statusCode == HttpStatus.ok) {
            final data = res.data!;
            // 提取返回对象中的data字段（用户数组）
            if (data['data'] is List) {
                return data['data'].map((e) => ReqresModelData.fromMap(e)).toList();
            }
        }
        return <ReqresModelData>[];
    }
}

2. 修正main.dart数据类型与展示逻辑 #

// 其他代码不变
class _HomeState extends State<Home> {
    // 改为单个用户数据模型的列表
    List<ReqresModelData>? _postItems;
    bool _isLoading = false;
    String? _errorMessage;

    // initState和loadData逻辑不变

    @override
    Widget build(BuildContext context) {
        if (_isLoading) {
            return const Center(child: CircularProgressIndicator());
        } else if (_postItems == null || _postItems!.isEmpty) { 
            return const Center(child: Text('No Data'));
        } else {
            return ListView.builder(
                itemCount: _postItems!.length,
                itemBuilder: (context, index) {
                    return ListTile(
                        // 直接访问单个用户的firstName
                        title: Text(_postItems![index].firstName),
                    );
                },
            );
        }
    }
}

3. 确保数据模型正确 #

需要两个模型类分别对应API返回的整体结构和单个用户结构：

class ReqresModel {
  final int page;
  final int perPage;
  final int total;
  final int totalPages;
  final List<ReqresModelData> data;

  ReqresModel({
    required this.page,
    required this.perPage,
    required this.total,
    required this.totalPages,
    required this.data,
  });

  factory ReqresModel.fromMap(Map<String, dynamic> map) {
    return ReqresModel(
      page: map['page'],
      perPage: map['per_page'],
      total: map['total'],
      totalPages: map['total_pages'],
      data: List<ReqresModelData>.from(map['data']?.map((x) => ReqresModelData.fromMap(x))),
    );
  }
}

class ReqresModelData {
  final int id;
  final String email;
  final String firstName;
  final String lastName;
  final String avatar;

  ReqresModelData({
    required this.id,
    required this.email,
    required this.firstName,
    required this.lastName,
    required this.avatar,
  });

  factory ReqresModelData.fromMap(Map<String, dynamic> map) {
    return ReqresModelData(
      id: map['id'],
      email: map['email'],
      firstName: map['first_name'],
      lastName: map['last_name'],
      avatar: map['avatar'],
    );
  }
}

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