Question

我必须根据API返回的数组在TextFormField小部件下生成Form。一旦生成这些字段，就可以在其中输入值。当用户单击“提交”按钮时，应将每个字段的值放在一个数组中以发布API。

要发送到API的对象

{
   "billerId" :"12341249",
   "customerParams": [ // Each object in this array denotes input field's name and value
       {
          "name": "Consumer Number",
          "value" : "43141"
       },
       {
          "name": "Subdivision Code",
          "value": "23"
       }
    ]
}

下面是我的StatefulWidget，在这里循环遍历fields数组（来自API）以生成字段。我的问题是，当我按下 Submit （提交）按钮时，打印语句会记录对象，类似于上面的内容，但是最后一个字段被按下了两次。

// All necessary imports

class AddCustomerDetails extends StatefulWidget {
  final Biller biller;

  const AddCustomerDetails({Key key, this.biller}) : super(key: key);

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

class _AddCustomerDetailsState extends State<AddCustomerDetails> {
  final _formKey = GlobalKey<FormState>();
  List _customerInputFields;
  var _submitObj;

  @override
  void initState() {
    _customerInputFields = widget.biller.customerParameter;
    _submitObj = {'billerId': widget.biller.id, 'customerParams': []}; // Initializing it here
    super.initState();
  }

  Widget _generateForm(List fields) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          ...fields.map((field) {
            return TextFormField(
              validator: (value) => _validateField(value),
              onChanged: (value) {
                _submitObj['customerParams']
                    .add({'name': field['paramName'], 'value': value}); // I know this is wrong and will push object on every key press
              },
            );
          }).toList(),
          SizedBox(height: 16),
          RaisedButton(
            onPressed: () {
              if (_formKey.currentState.validate()) {
                print(_submitObj); // See Actual response in snippet below
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }

  String _validateField(value) {
    // ... Validate field if empty
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(
              AppMediaQuery(context).appHorizontalPadding(4),
            ),
            child: _generateForm(_customerInputFields),
          ),
        ],
      ),
    );
  }
}

实际反应

I/flutter ( 8118): {billerId: JBVNL0000JHA01, customerParams: [{name: Consumer Number, value: 4}, {name: Consumer Number, value: 43}, {name: Consumer Number, value: 431}, {name: Consumer Number, value: 4314}, {name: Consumer Number, value: 43141}, {name: Subdivision Code, value: 2}, {name: Subdivision Code, value: 23}]}

我不希望它在每次按键时都推动对象。 如何做到这一点？当然，我可以添加谴责，但这不能解决问题。

Answer 1

您可以使用地图而不是列表来收集值吗？


  void initState() {
    _customerInputFields = widget.biller.customerParameter;
    /// Initialize `customerParams` as a map here
    _submitObj = {'billerId': widget.biller.id, 'customerParams': {}};
    super.initState();
  }
  ...
  return TextFormField(
    validator: (value) => _validateField(value),
    onChanged: (value) {
      /// Add/Update the field subscript and value here
      _submitObj['customerParams'][field['paramName']] = value;
    },
  );```

在Flutter中为动态生成的TextFormField生成TextEditingController

1 个答案: