Flutter 在无限循环中发送 http 请求答案

【问题标题】：flutter sends http requests in a infinity loopFlutter 在无限循环中发送 http 请求
【发布时间】：2022-01-15 18:19:10
【问题描述】：

我想使用颤振来评估一个 json 文件。 http 请求也有效，并且数据也按预期加载到地图中。但是，应用程序以连续循环启动请求，只能通过退出程序来停止。我只是不明白为什么会这样。

列表 jsonData 也填充了正确和预期的数据，并且在程序的输出中，我放入字符串中的数据也正确显示。但是一旦完成输出，它就会跳回 fetchPost 函数并重新开始一切。

你好，尼塞尔

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyState createState() => _MyState();
}

class _MyState  extends State<MyApp>{
  final url2 = "https://example.com/gartentemp/api/get_temp_data.php?data_type=temps_today";
  String basicAuth =
      'Basic ' + base64Encode(utf8.encode('user:password'));
  var _postJson = [];
  void fetchPost() async {
    try {
      //final response = await get(Uri.http("jsonplaceholder.typicode.com", "posts"));
      final response = await get(Uri.parse(url2),headers: <String, String>{'authorization': basicAuth});
      print(response.statusCode);
      Map<String, dynamic> map = json.decode(response.body);
      print("map");
      print(map);
      print("/map");
      List<dynamic> jsonData = map["temperaturen"];
      setState(() {
        _postJson = jsonData;
      });

    }catch(err) {
      print(err);
    }
  }

  @override
  void initState() {
    super.initState();
    //fetchPost();
  }

  @override
  Widget build(BuildContext context) {
    fetchPost();
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        body: ListView.builder(
            itemCount: _postJson.length,
            itemBuilder: (context, i) {
              final post = _postJson[i];
              return Text("Title: ${post["datum"]}\n ${post["temperatur1"]}\n\n");
        }
        ),
      )
    );
  }
}

Json 内容

{
    "temperaturen": [
        {
            "datum": "2021-12-11 00:00:06",
            "temperatur1": "-1.06",
            "temperatur2": "3.56"
        },
        {
            "datum": "2021-12-11 01:00:06",
            "temperatur1": "-1.44",
            "temperatur2": "3.19"
        }
    ],
    "Aggregat_data": [
        {
            "day_avg_temperatur1": "-2.4",
            "day_avg_temperatur2": "2.11",
        }
    ]
}

【问题讨论】：

标签： json flutter http

【解决方案1】：

您并没有真正提出问题，但您的代码的问题是您在构建方法中调用 fetchPost，然后调用 setState 导致再次执行 build 方法。

如您所见，显然有一个循环。

您可以做的是将_postJson 变成late Future<Response>，将未来分配给这个变量（没有setState，因为分配变量的行为是同步的），然后在build 中使用@ 987654329@显示数据。

有一个很棒的视频描述了FutureBuilder 的工作原理，我鼓励你看看：https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

【讨论】：