flutter - 通过API最佳做法更新listview

Question

这是我的代码，该代码调用API以获取xml项目。
列表 View 将按文章进行更新。

现在更改列表 View 的变量后，我一次调用了setState()。

但是，运行此代码。
setState()被无限调用，并保持更新。

我应该如何解决或最佳做法是什么？

class Article{
  String title;
  String url;
  Article() {}
}
List<Article> articles = [];

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;


  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    void _callApi() async{
      final response = await http.get('http://localhost/mamasoku/web/app_dev.php/api/byLatest/1/10');
      if (response.statusCode == 200) {

        var document = xml.parse(response.body);
        var items = document.findAllElements('item');
        print("item number:" + items.length.toString());
        items.forEach((var item) {
          var a = Article();
          a.title = item.findElements('title').single.text;
          a.url = item.findElements('url').single.text;
          articles.add(a);
        });
        setState(() => {});
      }
    }
    _callApi();

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: BodyLayout(), 
    );
  }
}
class BodyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _myListView(context);
  }
}
 Widget _myListView(BuildContext context) {


      return ListView.builder(
        itemCount: articles.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(articles[index].title),
          );
        },
      );
    }

void onTapped(var index) {
  print(index);
}

Answer 1

setState()被无限调用的原因是setState()将调用build(BuildContext context)方法。

因此，您应该从build(BuildContext context)方法中删除setState()，并将_callApi()方法移至initState()，

像这样:

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'package:flutter/services.dart' show rootBundle;
import 'dart:async';
import 'dart:typed_data';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class Article {
  String title;
  String url;

  Article() {}
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  List<Article> articles = [];

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _callApi();
  }

  void _callApi() async {
//    final response = await http
//        .get('http://localhost/mamasoku/web/app_dev.php/api/byLatest/1/10');
//    if (response.statusCode == 200) {
//      var document = xml.parse(response.body);
//      var items = document.findAllElements('item');
//      print("item number:" + items.length.toString());
//      items.forEach((var item) {
//        var a = Article();
//        a.title = item.findElements('title').single.text;
//        a.url = item.findElements('url').single.text;
//        articles.add(a);
//      });
//
//    }

  ///  Analog network request
  Future.delayed(Duration(seconds: 10)).then((data){
    articles.add(Article()..title="test1"..url="www.123.com");
    articles.add(Article()..title="test2"..url="www.123.com");
    articles.add(Article()..title="test3"..url="www.123.com");
    articles.add(Article()..title="test4"..url="www.123.com");
    setState(() => {});
  });

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: BodyLayout(articles),
    );
  }
}

class BodyLayout extends StatelessWidget {
  final List<Article> articles;

  BodyLayout(this.articles);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: articles.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(articles[index].title),
        );
      },
    );
  }
}

void onTapped(var index) {
  print(index);
}