Flutter TextFieldInput 值在 setState 方法后未更新答案

【问题标题】：Flutter TextFieldInput Value not updating after setState methodFlutter TextFieldInput 值在 setState 方法后未更新
【发布时间】：2020-11-12 14:07:40
【问题描述】：

我有一个简单的代码如下：

 TextFormField(
                      initialValue: otp ?? "",
                    ),
                    SizedBox(height: getProportionateScreenHeight(20.0)),
                    Text(otp ?? ""),
                    SizedBox(height: getProportionateScreenHeight(20.0)),

现在我从 api 提供 otp 的函数调用 api，并且需要在 TextFieldInput 中显示，而 TextFieldInput 根本没有显示！但它显示在Text Widget 中。可能是什么问题。

void processCoupon() async {
    try {
      if (_terms) {
        print("processing mobile number !");
        var data = {"mobile": _authModel.mobile};
        ApiCall().postData(data, cApi).then((result) {
          print(result);
          if (result["data"] != null) {
            print(result["data"]["otp"]);
            setState(() {
              otp = result["data"]["otp"].toString();
            });
           }
        });
      } else {
        print("terms not agreed !");
      }
    } catch (e) {
      print(e);
    }
  }

【问题讨论】：

你得到了什么print(result["data"]["otp"]);？
OTP 编号。

标签： flutter dart input-field

【解决方案1】：

为您的TextField 创建一个TextEditingController：

  // create a controller for the TextField
  TextEditingController controller = TextEditingController();

将controller 分配给您的TextField：

     TextFormField(
          initialValue: otp ?? "",
          // assign the controller to the TextField
          controller: controller, // new line
        ),
        SizedBox(height: getProportionateScreenHeight(20.0)),
        Text(otp ?? ""),
        SizedBox(height: getProportionateScreenHeight(20.0)),

将otp 字符串分配给controller 的Text 属性：

   void processCoupon() async {
    try {
      if (_terms) {
        print("processing mobile number !");
        var data = {"mobile": _authModel.mobile};
        ApiCall().postData(data, cApi).then((result) {
          print(result);
          if (result["data"] != null) {
            print(result["data"]["otp"]);
            setState(() {
              otp = result["data"]["otp"].toString();
              // set the otp to be the text the controller has
              controller.text = otp; // new line
            });
          }
        });
      } else {
        print("terms not agreed !");
      }
    } catch (e) {
      print(e);
    }
  }

【讨论】：

【解决方案2】：

我认为 InitialValue 仅在第一次构造中使用，之后您应该使用 TextController 进行更新。

声明：

var otpController = TextEditingController();

将控制器添加到您的 TextFormField：

controller: otpController,

更新文字：

setState(() {
    otpController.text = result["data"]["otp"].toString();
});

【讨论】：

【解决方案3】：

我知道我们可以为此目的使用TextController 的方式，但问题是表单很长，这是我们不能使用此方法的地方，因为需要使用对象。问题是他们inital value can be passed 但是当我们尝试更新该值时，为了反映该值，我们还需要更新键，以便inputfield 也将更新。我刚刚添加了以下值，瞧！现在一切正常。

TextFormField(

key: Key(otp), <--- this line was added
                      initialValue: otp ?? "",
                    ),
                    SizedBox(height: getProportionateScreenHeight(20.0)),
                    Text(otp ?? ""),
                    SizedBox(height: getProportionateScreenHeight(20.0)),

【讨论】：

【解决方案4】：

TextFormField(
                  initialValue: otp ?? "",
                ),

改变

TextEditingController _editingController=TextEditingController();
TextFormField(initialValue: otp ?? "",controller: _editingController,);

和

  setState(() {
          otp = result["data"]["otp"].toString();
        });

改变

 setState(() {
          otp = result["data"]["otp"].toString();
          _editingController.text=otp;
        });

【讨论】：