需要一个“Map<List<dynamic>, dynamic>”类型的值，但在发出 api post 请求时得到一个“List<dynamic>”类型的值

Question

我正在构建一个颤振网页，其中包含从 api 检索的数据，几乎一切正常，但我遇到了这个问题。该api只接受一个参数'{“url”：“”}'，并且我的代码中的所有内容都有效，因为如果我尝试在控制台中打印结果，它就可以工作。我唯一的问题是在屏幕上显示数据时，即使我将他期望的类型传递给他，颤振也给了我这个错误。

这是我的代码：

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart';

Future<Album> fetchAlbum() async {
  final headers = {"Content-type": "text/plain"};
  final json = '{"url": ""}';
  final response = await post(
      Uri.parse('myapikey'),
      headers: headers,
      body: json);

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    print(response.body);
    return Album.fromJson(jsonDecode(response.body));
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }
}

class Album {
  final String url;

  Album({
    required this.url,
  });

  factory Album.fromJson(Map<List<dynamic>, dynamic> json) {
    return Album(url: json['']);
  }
}

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

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

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

class _MyAppState extends State<MyApp> {
  late Future<Album> futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Test'),
        ),
        body: Center(
          child: FutureBuilder<Album>(
            future: futureAlbum,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data!.url);
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }

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

有人可以帮我吗？

Answer 1

Album 类中的工厂需要 Map 具有 List 类型的键和 动态类型的值，但您的 json 正文是 {"url": ""}，解码后它带有jsonDecode(response.body)，类型为Map<String, String>，而这IS NOT THE SAME与Map<List<dynamic>, dynamic>。

class Album {
  final String url;

  Album({
    required this.url,
  });
  
  // This factory causes the error
  factory Album.fromJson(Map<List<dynamic>, dynamic> json) {
    return Album(url: json['']);
  }
}

此外，当您要检索 url 的值时，您必须编写 json["url"] 而不是 json['']，因为 "url" 是 "" 在 '{"url": ""}' 中的键。

解决方案：因此您应该更改工厂以接受Map<dynamic, dynamic> 类型的参数，并将用于检索"" 的密钥从json[''] 更改为json["url"]。

  factory Album.fromJson(Map<dynamic, dynamic> json) {
    return Album(url: json["url"]);
  }

另请参阅此工作 DartPad 示例：

import 'dart:async';
import 'dart:convert';

import 'package:http/http.dart';

Future<Album> fetchAlbum() async {
  final headers = {"Content-type": "text/plain"};
  final json = '{"url": ""}';
  final response = Response(
    json,
    200,
    request: Request(
      "post",
      Uri.parse('myapikey'),
    ),
    headers: headers,
  );

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    print(response.body);
    return Album.fromJson(jsonDecode(response.body));
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }
}

class Album {
  final String url;

  Album({
    required this.url,
  });

  factory Album.fromJson(Map<dynamic, dynamic> json) {
    return Album(url: json["url"]);
  }
}

void main() {
  fetchAlbum();
}