错误：类型“_InternalLinkedHashMap<String, dynamic>”不是类型转换中“List<dynamic>”类型的子类型

Question

我是 Flutter 的新手，我尝试在“10.0.2.2:8000/api/membres”上从我的 api 获取数据，但出现错误，例如类型 List dynamic is not a subtype of type 'List. 我按照flutter的例子：https://flutter.dev/docs/cookbook/networking/fetch-data#complete-example

请帮助我学习有用的教程并告诉我如何修复此代码。

MyHomePage.dart

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

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

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

class _MyHomePageState extends State<MyHomePage> {

  static const url = "10.0.2.2:8000/api/membres";

  Future<List<Map<String, dynamic>>> _future;
  @override
  void initState() {
    super.initState();
    _future = fetch();
  }

  Future<List<Map<String, dynamic>>> fetch() {
    return http
        .get("http://10.0.2.2:8000/api/membres")
        .then((response) {
          return response.statusCode == 200
              ? response.body
              : throw 'Error when getting data';
        })
        .then((body) => json.decode(body)) //
        .then((list) => (list as List).cast<Map<String, dynamic>>());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: RefreshIndicator(
        onRefresh: () async {
          _future = fetch();
          setState(() {});
          return _future;
          },
        child: FutureBuilder<List<Map<String, dynamic>>>(
          future: _future,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Center(
                child: Container(
                  constraints: BoxConstraints.expand(),
                  child: SingleChildScrollView(
                    physics: AlwaysScrollableScrollPhysics(),
                    child: Text(snapshot.error.toString()),),),);}
            if (!snapshot.hasData) {
              return Center(
                child: CircularProgressIndicator(),
              );}
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                final item = snapshot.data[index];
                return ListTile(
                  title: Text(item['nom']),
                  subtitle: Text(item['prenom']),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

我用 Postman 测试了 API，它可以工作：

这是错误：

在模拟器中：

Answer 1

你有几个问题...

你应该整理一下fetch，把它改成async：

Future<Map<String, dynamic>> fetch() async {
  http.Response response = await http.get('http://10.0.2.2:8000/api/membres');
  if (response.statusCode != 200) return null;
  return json.decode(response.body);
}

如果您查看在 postman 中获得的 json，您会看到最上面的项目是一张地图 - 至少有一个键 membres。该键似乎包含其他地图的列表。从您的类型来看，您希望获得该列表。

如果该假设是正确的，您可以按如下方式进行调整：

Future<List<Map<String, dynamic>>> fetch() async {
  http.Response response = await http.get('http://10.0.2.2:8000/api/membres');
  if (response.statusCode != 200) return null;
  return List<Map<String, dynamic>>.from(json.decode(response.body)['membre']);
}