Flutter API 在 initState() 内部调用未来方法时使用 Future Builder 调用返回错误

Question

我试图调用第一次构建页面时需要加载的 API。 所以我使用了 FutureBuilder 并编写了一个 initState 调用。 每个页面都可以正常工作，但仅在一个页面上，我遇到了上下文问题。 然后我了解了 didChangeDependencies。 这是从另一个 class 调用 API 的正确方法（也需要访问当前的小部件上下文）。 我应该在哪里调用calculatorFuture = getParkingAreaList(); 在 initState() 或 didChangeDependencies() 中。

String TAG = "CalculatorPage";

class CalculatorPage extends StatefulWidget {
  const CalculatorPage({
    Key key,
  }) : super(key: key);

  @override
  _CalculatorPageState createState() => _CalculatorPageState();
}
    class _CalculatorPageState extends State<CalculatorPage> {
      Future calculatorFuture;
    
     @override
      void initState() {
        super.initState();
      }
    
    
      @override
      void didChangeDependencies() {
        super.didChangeDependencies();
        calculatorFuture = getParkingAreaList();
      }
    
    Future<bool> apiCallHere() async {
        print('apiCallHere');
        String lang = getCurrentLanguage(context);
        print('going to call res');
        var res = await HttpHandler.apiCallFromHttpHanlderClass(context);
        if (res == null) {
          print('res is null');
          showToast(LanguageLocalization.of(context).getTranslatedValue('generic_failure_message'));
          return false;
        }
        print(res);
        if(res["STATUS_CODE"] == 1) {
          print('apiCallHere status code = 1');
          apiData = res['someData'];
          return true;
        }
        else {
          print('apiCallHere status code !=1');
          return false;
        }
      }
    
    
      @override
      Widget build(BuildContext context) {
        print(TAG);
        return Scaffold(
            appBar: commonAppBar(context: context, title: 'calculator'),
            body: FutureBuilder(
              future: calculatorFuture,
              builder: (context, snapshot) {
                print(snapshot);
                if (snapshot.hasError || (snapshot.hasData && !snapshot.data)) {
                  print('has error');
                  print(snapshot.hasError ? snapshot.error : "unable to load data");
                  return unableToLoadView(context);
                } else if (snapshot.hasData && snapshot.data) {
                  print('completed future');
                  return Container(
                      margin: commonPagePadding,
                      child: ListView(
                        children: <Widget>[
                          //some widget that deals with apiData
                        ],
                      )
                  );
                } else {
                  print('loading');
                return showLoaderWidget(context);
                }
              },
            )
        );
    }
    }

Answer 1

你可以在 didchangedependenci 中调用未来的 function 像这样改变

@override
     Future <void> didChangeDependencies() async{
        super.didChangeDependencies();
        calculatorFuture = await getParkingAreaList();
      }

Answer 2

如果您想在页面加载时调用 API 一次，只需将 future 放入 initState 中，如下例所示。

@override
  void initState() {
    super.initState();
    calculatorFuture = getParkingAreaList();
  }