Question

我正在尝试从API提取数据。我收到错误消息“类型列表不是Map的子类型。我是新来的，不知道我在哪里犯错。

这是我的提取帖子功能：

Future<Post> fetchPost() async {
  final response = await http.get('http://starlord.hackerearth.com/beercraft');

  if (response.statusCode == 200) {
    return Post.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load post');
  }
}

在主屏幕中，我使用的是FutureBuilder：

final Future<Post> post;
HomeScreen({Key key, this.post}) : super(key: key);

FutureBuilder<Post>(
          future: post,
          builder: (context, result) {
            if (result.hasData) {
              return ListView.builder(
                itemBuilder: (context, index){
                  return cartItemComponent(result.data.name, result.data.abv, result.data.ounces);
                },
              );
            } else if (result.hasError) {
              return Text("${result.error}");
            }

            // By default, show a loading spinner.
            return CircularProgressIndicator();
          },

如何解决此错误？预先感谢。

Answer 1

这样做的原因是，您正在调用的API（http://starlord.hackerearth.com/beercraft）返回JSON对象的列表，但是您就像对待一个对象一样处理它。 / p>

您将需要重写代码以将其作为列表来处理，这应该与您的ListView完美配合：

Future<List<Post>> fetchPosts() async {
  final response = await http.get('http://starlord.hackerearth.com/beercraft');

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

fetchPost需要更新为 fetchPosts 以返回Future<List<Post>>。在这里，您可以使用List.map简单地将响应列表中的每个项目映射到Post对象。
下一步是将返回的Future作为FutureBuilder中的列表来处理，如下所示：

final Future<List<Post>> posts;

FutureBuilder(
    future: posts,
    builder: (context, AsyncSnapshot<List<Post>> snapshot) {
      if (snapshot.hasData) {
        return ListView(
          children: snapshot.data.map<Widget>((post) {
            return cartItemComponent(post.name, post.abv, post.ounces);
          }).toList(),
        );
      } else if (snapshot.hasError) {
        return Text('${snapshot.error}');
      }

      // By default, show a loading spinner.
      return const CircularProgressIndicator();
    }
)

请注意，我只是将列表作为Widget的列表传递给了ListView的children参数，因为在这种情况下不需要构建器。
我只是再次使用map方法，使用您的Post函数将Widget转换为cartItemComponent。

List <dynamic>类型不是'Map <String，dynamic>'

1 个答案: