从API获取的按钮单击添加下拉小部件

Question

Gere是我的目标：我单击添加按钮，然后添加下拉按钮，其项是从API提取的。

这是我的问题：我选择下拉值，但未选择值。我单击添加按钮，然后将先前的值填充到新添加的下拉按钮上。

这是我的代码（完整）

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

class RepeatableSection extends StatefulWidget {
  @override
  _RepeatableSectionState createState() => _RepeatableSectionState();
}

class _RepeatableSectionState extends State<RepeatableSection> {
  List<Widget> extractedChildren = <Widget>[];
  int _index = 1;

  String _mySelection;
  List data = List();

  Future<void> fetchAPI() async {
    var url = "http://webmyls.com/php/getdata.php";
    Map<String, String> headers = {
      'Content-type': 'application/json',
      'Accept': 'application/json',
    };
    final response = await http.post(url, headers: headers);
    final responseJson = json.decode(response.body);

    if (response.statusCode == 200) {
      setState(() {
        data = responseJson;
      });
    } else {
      setState(() {});
      throw Exception('Failed to load internet');
    }
  }

  @override
  void initState() {
    this.fetchAPI();
  }

  Widget build(BuildContext context) {
    return Column(
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: extractedChildren,
        ),
        RaisedButton(
          child: Text('Add'),
          onPressed: () {
            add();
          },
        ),
      ],
    );
  }

  void add() {
    int keyValue = _index;
    extractedChildren = List.from(extractedChildren)
      ..add(Column(
        key: Key("$keyValue"),
        children: <Widget>[
          Text(keyValue.toString()),
          DropdownButton(
            hint: Text('Choose..'),
            items: data.map((item) {
              return new DropdownMenuItem(
                child: new Text(item['item_name']),
                value: item['id'].toString(),
              );
            }).toList(),
            onChanged: (newVal) {
              setState(() {
                _mySelection = newVal;
              });
            },
            value: _mySelection,
          ),
        ],
      ));
    setState(() => ++_index);
  }
}

Answer 1

问题是，当未从API提取数据时，您正在单击添加按钮。如果几秒钟后单击，将在第一个下拉列表的下拉列表中看到数据。

为了解决这个问题，您可以在数据到达之前向用户显示其他小部件。

以下代码将为您提供更多帮助。

List<Widget> extractedChildren = <Widget>[];
  int _index = 1;

  String _mySelection;
  List data = List();

  Future<void> fetchAPI() async {
    var url = "http://webmyls.com/php/getdata.php";
    Map<String, String> headers = {
      'Content-type': 'application/json',
      'Accept': 'application/json',
    };
    final response = await http.post(url, headers: headers);
    final responseJson = json.decode(response.body);

    if (response.statusCode == 200) {
      data = responseJson;
    } else {
      throw Exception('Failed to load internet');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchAPI().then((value) {
      setState(() {});
    });
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: data.length > 0
          ? Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: extractedChildren,
                ),
                RaisedButton(
                  child: Text('Add'),
                  onPressed: () {
                    add();
                  },
                ),
              ],
            )
          : Container(
              child: Text("hello"),
            ),
    );
  }

  void add() {
    int keyValue = _index;
    extractedChildren = List.from(extractedChildren)
      ..add(Column(
        key: Key("$keyValue"),
        children: <Widget>[
          Text(keyValue.toString()),
          DropdownButton(
            hint: Text('Choose..'),
            items: data.map((item) {
              return new DropdownMenuItem(
                child: new Text(item['item_name']),
                value: item['id'].toString(),
              );
            }).toList(),
            onChanged: (newVal) {
              setState(() {
                _mySelection = newVal;
              });
            },
            value: _mySelection,
          ),
        ],
      ));
    setState(() => ++_index);
  }