FutureBuilder 不顯示從服務器獲取的 json 數據

Question

我是 flutter 的新手，出於某種原因，futurebuilder 沒有顯示 json 從服務器獲取的數據； 數據打印在調試控制台上，但未顯示在 UI 中，我一遍又一遍地更改我的代碼，但我總是得到相同的結果“出了點問題”

Future<List<Album>> getData(http.Client client) async {
List<Album> list;
String link = "https://extendsclass.com/api/json-storage/bin/efcedbd";
var res = await http
    .get(Uri.encodeFull(link), headers: {"Accept": "application/json"});
print(res.body);
if (res.statusCode == 200) {
  dynamic data = json.decode(res.body);
  var rest = data["articles"] as List;
  print(rest);
  list = rest.map<Album>((dynamic json) => Album.fromJson(json)).toList();
}
print("List Size: ${list.length}");
return list;}
Future<List<Album>> transactionsFuture;
void initState() {
transactionsFuture = getData(http.Client());
super.initState();}

class Album {

final String id;

Album({this.id});

factory Album.fromJson(Map<String, dynamic> json) {
return Album(
  id: json['id'] as String,
);}}
body: FutureBuilder(
  future: transactionsFuture,
  builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
    if (snapshot.hasData) {
      // Data fetched successfully, display your data here
      return Column(
        children: <Widget>[
          Text(snapshot.data.id),

        ],
      );
    } else if (snapshot.hasError) {
      // If something went wrong
      return Text('Something went wrong...');
    }

    // While fetching, show a loading spinner.
    return CircularProgressIndicator();
  }
)

我的代碼缺少什么嗎？

Answer 1

您錯誤地實施了 FutureBuilder 和 getData function。 使用 FutureBuilder，您可以直接調用 getData function 而無需將該函數的返回值分配給代碼中聲明的變量。 另外，刪除你的 initState() 和 fromJson() 試試這個：

Future<String> getData(http.Client client) async {
String link = "https://extendsclass.com/api/json-storage/bin/efcedbd";
var res = await http
    .get(Uri.encodeFull(link), headers: {"Accept": "application/json"});
print(res.body);
if (res.statusCode == 200) {
  final data = json.decode(res.body);
}
return data["id"] ;}

您的構建小部件：

body: FutureBuilder(
  future: getData,
  builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
    if (snapshot.hasData) {
      // Data fetched successfully, display your data here
      return Column(
        children: <Widget>[
          Text(snapshot.data),
        ],
      );
    } else if (snapshot.hasError) {
      // If something went wrong
      return Text('Something went wrong...');
    }
    return CircularProgressIndicator();
  }
 ),