将异步值返回给 initState()

Question

我的以下代码运行良好，从 url 读取 csv 数据并打印输出：

import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
import 'dart:async';
import 'package:csv/csv.dart';

void fetchUserData() async {
  final request = await HttpClient().getUrl(Uri.parse(
      'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
  final response = await request.close();
  List<List<dynamic>> rowsAsListOfValues;
  await for (final csvString in response.transform(const Utf8Decoder())) {
    rowsAsListOfValues =
        const CsvToListConverter().convert(csvString);
  }
  print(rowsAsListOfValues);
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    fetchUserData();
  }

  @override
  Widget build(BuildContext context) { // ... // }
}

我不需要打印输出，而是需要将其返回到一个变量中，我可以在 y 小部件中显示该变量，我尝试如下：

Future<List<List<dynamic>>> fetchUserData() async {   /// change
  final request = await HttpClient().getUrl(Uri.parse(
      'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
  final response = await request.close();
  List<List<dynamic>> rowsAsListOfValues;
  await for (final csvString in response.transform(const Utf8Decoder())) {
    rowsAsListOfValues =
        const CsvToListConverter().convert(csvString);
  }

  return rowsAsListOfValues;    /// change
}

class _MyHomePageState extends State<MyHomePage> {
  var rowsAsListOfValues;  /// new

  @override
  void initState() {
    super.initState();
    rowsAsListOfValues = fetchUserData();    /// new
    print(rowsAsListOfValues);   /// new
  }

  @override
  Widget build(BuildContext context) { // ... // }
}

但我得到的输出是I/flutter ( 7505): Instance of 'Future<List<List<dynamic>>>'

我该如何解决？

Answer 1

在这种情况下，您需要从 initState 切换到 didChangeDependency。因为你需要等待一些进程，而你不能在 initState 中等待。但是你可以这样等待

@override
void didChangeDependencies() async {
  super.didChangeDependencies();
  rowsAsListOfValues = await fetchUserData();
  super.setState(() {}); // to update widget data
  /// new
  print(rowsAsListOfValues);
}

这就是结果

I/flutter (24313): [[vranches], [Dammam, 2], [Khobar, 3]]

Answer 2

您可以使用 Future.delayed() 包装您的代码，如下所示。

 @override
  void initState() {
    super.initState();
    Future.delayed(Duration.zero,()async{
       rowsAsListOfValues =await fetchUserData();   
       setState(() {});
       print(rowsAsListOfValues);   // this return correct value
    });
   print(rowsAsListOfValues);  // this return null
  }

完整代码

import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
import 'dart:async';
import 'package:csv/csv.dart';

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

class App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

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

Future<List<List<dynamic>>> fetchUserData() async {
  final request = await HttpClient().getUrl(Uri.parse(
      'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
  final response = await request.close();
  List<List<dynamic>> rowsAsListOfValues;
  await for (final csvString in response.transform(const Utf8Decoder())) {
    rowsAsListOfValues =
        const CsvToListConverter().convert(csvString);
  }
  return rowsAsListOfValues;
}

class _AppState extends State<HomePage> {
  var rowsAsListOfValues;
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration.zero, () async {
      rowsAsListOfValues = await fetchUserData();
      setState(() {});
      print(rowsAsListOfValues);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$rowsAsListOfValues',
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

initState 方法是同步的，不支持async。我推荐使用FutureBuilder，但您也可以将代码移至async 函数。

FutureBuilder

import 'package:flutter/material.dart' show
  Widget, FutureBuilder, AsyncSnapshot
;

class _MyHomePageState extends State<MyHomePage> {

  static Future<void> fetchUserData() {
    return Future().delayed(
      Duration(seconds: 10),
      () => 'loaded'
    );
  }

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

  @override
  Widget build(BuildContext context) {

    return FutureBuilder(
      future: Future.wait([
        fetchUserData()
      ]),

      builder: (
        BuildContext context,
        AsyncSnapshot snapshot
      ) {
        if (snapshot.hasData) {
          return Text(snapshot.data);
        }
        return Text('loading...');
      }
    );
  }
}

异步函数

@override
void initState () {
  super.initState();
  (() async {
    rowsAsListOfValues = await fetchUserData();
    print(rowsAsListOfValues);
  })();
}

或

@override
void initState() {
  super.initState();
  initLoad();
}

void initLoad() async {
  rowsAsListOfValues = await fetchUserData();
  print(rowsAsListOfValues);
}

Answer 4

将then() 与async 函数一起使用时，我感觉更轻松。你可以试试这个：

  

    fetchUserData().then((value) {
       setState(() {
        rowsAsListOfValues = value;
       });
    });   

或者你可以像这样使用await。

  @override
  void initState() async {
    super.initState();

    rowsAsListOfValues = await fetchUserData();
                      
    print(rowsAsListOfValues);  
  }