Flutter - setState 在 http 响应代码中不起作用

Question

我有一个简单的页面来从服务器获取数据并解析响应。 我有两个用户可见的小部件，一个是 _loadingWidget() 小部件，另一个是 errorWidget() 小部件。

我添加了一些打印语句来显示代码正在执行的位置。一切正常，但 setState for errorWidget() 不工作。 我在这里做错了什么？

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

import '../strings.dart';

class FetchDataPage extends StatefulWidget {
  final String text;
  FetchDataPage({Key key, @required this.text}) : super(key: key);

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

class _FetchDataState extends State<FetchDataPage> {
  String _productUrl;
  Widget pageWidget;

  @override
  Widget build(BuildContext context) {
    pageWidget = _loadingWidget();
    _productUrl = widget.text;
    checkPrice(_productUrl);
    return Scaffold(
      body: Container(padding: EdgeInsets.all(20.0), child: pageWidget),
    );
  }

  Widget _loadingWidget() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Center(
          child: CircularProgressIndicator(
            backgroundColor: Colors.transparent,
            valueColor: AlwaysStoppedAnimation<Color>(Colors.blueGrey),
          ),
        ),
        SizedBox(height: 20.0),
        Text(
          "Checking Price...",
          style: TextStyle(
            color: Colors.blueGrey,
            fontSize: 20.0,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }

  Widget errorWidget() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Center(
          child: Icon(
            Icons.sentiment_dissatisfied,
            color: Colors.red,
            size: 60.0,
          ),
        ),
        SizedBox(height: 20.0),
        Center(
          child: Text(
            "Product not found in database.\nPlease try again later.",
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.blueGrey,
              fontSize: 17.0,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ],
    );
  }

  void checkPrice(String productUrl) {
    bool isUrl = isURL(productUrl, requireProtocol: true, requireTld: true);
    if (!isUrl) {
      RegExp regExp = new RegExp(r"((\w+:\/\/\S+)|(\w+[\.:]\w+\S+))[^\s,\.]");
      setState(() {
        productUrl = regExp.stringMatch(productUrl).toString();
      });
    }
    /*
    //setState is Working fine here!
    setState(() {
      pageWidget = errorWidget();
    });
    */
    var response = getLatestPrice(productUrl);
    response.then((response) {
      /*
      //It's Not Working Here :(
      setState(() {
        pageWidget = errorWidget();
      });
      */

      print("Got Response: " + response.body.toString());
      if (response.statusCode == 200) {
        var loginData = json.decode(response.body);
        bool status = loginData["status"];
        print("STATUS: " + status.toString());
        if (status) {
          //This print statement is also working fine!
          print(loginData["productUrl"]);
        } else {
          //This isn't working either
          setState(() {
            pageWidget = errorWidget();
          });
        }
      } else {
        //Not Working
        setState(() {
          pageWidget = errorWidget();
        });
      }
    });
  }
}

Future<http.Response> getLatestPrice(productUrl) async {
  var url = Strings.baseUrl + 'api/checkPrice';
  var response = await http.post(url, body: {
    'product_url': productUrl,
  }, headers: {
    HttpHeaders.authorizationHeader:
        "Basic " + base64Encode(utf8.encode('username:password'))
  });
  return response;
}

Answer 1

我通过设置 bool 来修复它：

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

import '../strings.dart';

class FetchDataPage extends StatefulWidget {
  final String text;
  FetchDataPage({Key key, @required this.text}) : super(key: key);

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

class _FetchDataState extends State<FetchDataPage> {
  String _productUrl;
  bool showError = false;

  @override
  Widget build(BuildContext context) {
    _productUrl = widget.text;
    if (_productUrl != null) {
      checkPrice(_productUrl);
    }
    return Scaffold(
      body: Container(padding: EdgeInsets.all(20.0), child: pageWidget()),
    );
  }

  Widget pageWidget() {
    if (showError == false) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Center(
            child: CircularProgressIndicator(
              backgroundColor: Colors.transparent,
              valueColor: AlwaysStoppedAnimation<Color>(Colors.blueGrey),
            ),
          ),
          SizedBox(height: 20.0),
          Text(
            "Checking Price...",
            style: TextStyle(
              color: Colors.blueGrey,
              fontSize: 20.0,
              fontWeight: FontWeight.w500,
            ),
          ),
        ],
      );
    } else {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Center(
            child: Icon(
              Icons.sentiment_dissatisfied,
              color: Colors.red,
              size: 60.0,
            ),
          ),
          SizedBox(height: 20.0),
          Center(
            child: Text(
              "Product not found in database.\nPlease try again later.",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.blueGrey,
                fontSize: 17.0,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
        ],
      );
    }
  }

  void checkPrice(String productUrl) {
    bool isUrl = isURL(productUrl, requireProtocol: true, requireTld: true);
    if (!isUrl) {
      RegExp regExp = new RegExp(r"((\w+:\/\/\S+)|(\w+[\.:]\w+\S+))[^\s,\.]");
      setState(() {
        productUrl = regExp.stringMatch(productUrl).toString();
      });
    }
    var response = getLatestPrice(productUrl);
    response.then((response) {
      if (response.statusCode == 200) {
        var loginData = json.decode(response.body);
        bool status = loginData["status"];
        if (status) {
          print(loginData["productUrl"]);
        } else {
          setState(() {
            showError = true;
          });
        }
      } else {
        setState(() {
          showError = true;
        });
      }
    });
  }
}

Future<http.Response> getLatestPrice(productUrl) async {
  var url = Strings.baseUrl + 'api/checkPrice';
  var response = await http.post(url, body: {
    'product_url': productUrl,
  }, headers: {
    HttpHeaders.authorizationHeader:
        "Basic " + base64Encode(utf8.encode('username:password'))
  });
  return response;
}