类型列表不是“Map类型”的子类型

Question

我试图从API获取数据。我得到了错误类型列表不是地图的子类型。我是新来的，不明白我在哪里犯了错误。

这是我的回帖功能：

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对象列表，但您处理它的方式就像只有一个对象一样。

您将需要重写代码，将其作为列表处理，这将与您的列表视图完美配合：

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才能返回未来

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();
    }
)

请注意，我只是将列表作为小部件的列表传递给ListView的子项参数，因为在这种情况下不需要任何生成器
我只是再次使用map方法，使用cartItemComponent函数将Post转换为Widget。