如何为基于API数据的DropdownButtonFormField设置默认值？报错解决

问题原因 #

你遇到的断言错误，核心原因是Dart中Map对象的相等判断基于引用而非内容：

• 从intervention['equipment']拿到的Map，和equipmentList里内容完全一致的Map是两个不同的引用
• DropdownButton用==比较value和DropdownMenuItem.value时，因引用不匹配找不到对应item，触发断言

解决方案 #

方案一：用唯一ID匹配（快速修复） #

放弃用整个Map作为选中值，改用Map里的唯一标识（比如id）匹配，这是最直接的修复方式：

1. 修改选中值的存储类型：

// 改为存储设备id，而非整个Map
var selectedEquipmentId;

2. 设置默认值时存储id：

if(!isNew) {
  setState(() {
    selectedEquipmentId = intervention['equipment']['id'];
  });
}

3. 调整DropdownButtonFormField配置：

DropdownButtonFormField(
  value: selectedEquipmentId,
  icon: const Icon(Icons.arrow_drop_down_circle_outlined),
  iconSize: 24,
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Equipment',
    labelStyle: TextStyle(color: cGrey, fontSize: 14),
    floatingLabelStyle: TextStyle(color: cPrimary, fontSize: 18, fontWeight: FontWeight.w700),
  ),
  items: equipmentList.map((item){
    return DropdownMenuItem(
      value: item['id'], // 用id作为item的value
      child: Text(
        item['label'],
        style: const TextStyle(color: Colors.black),
      ),
    );
  }).toList(), 
  onChanged: (newValue) {
    setState(() {
      selectedEquipmentId = newValue;
      isEquipment = true;
      // 如果需要完整设备对象，可从列表查找：
      // final selectedEquipment = equipmentList.firstWhere((e) => e['id'] == newValue);
    });
  },
),

方案二：自定义实体类（规范长期方案） #

将API返回的Map转换成自定义实体类，重写相等判断方法，让对象按内容而非引用比较，这是更规范的做法：

1. 创建Equipment实体类：

class Equipment {
  final int id;
  final String label;

  Equipment({required this.id, required this.label});

  // 从Map转成实体对象
  factory Equipment.fromMap(Map<String, dynamic> map) {
    return Equipment(
      id: map['id'],
      label: map['label'],
    );
  }

  // 重写相等判断：按id比较
  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Equipment &&
          runtimeType == other.runtimeType &&
          id == other.id;

  // 重写hashCode，配合==使用
  @override
  int get hashCode => id.hashCode;
}

2. 调整变量声明和数据转换：

// 声明为Equipment类型
Equipment? selectedEquipment;

// 假设API返回List<Map>，转换为实体列表
List<Equipment> equipmentList = [];
// 示例转换代码：
// equipmentList = apiResponse.map((map) => Equipment.fromMap(map)).toList();

3. 设置默认值：

if(!isNew) {
  setState(() {
    selectedEquipment = Equipment.fromMap(intervention['equipment']);
  });
}

4. 调整DropdownButtonFormField：

DropdownButtonFormField<Equipment>(
  value: selectedEquipment,
  icon: const Icon(Icons.arrow_drop_down_circle_outlined),
  iconSize: 24,
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Equipment',
    labelStyle: TextStyle(color: cGrey, fontSize: 14),
    floatingLabelStyle: TextStyle(color: cPrimary, fontSize: 18, fontWeight: FontWeight.w700),
  ),
  items: equipmentList.map((item){
    return DropdownMenuItem(
      value: item,
      child: Text(
        item.label, // 直接访问实体类属性
        style: const TextStyle(color: Colors.black),
      ),
    );
  }).toList(), 
  onChanged: (newValue) {
    setState(() {
      selectedEquipment = newValue;
      isEquipment = true;
    });
  },
),

额外注意事项 #

• 确保equipmentList在设置selectedEquipment前已加载完成，否则空列表会触发同样的断言错误，可加判断：

  if(equipmentList.isNotEmpty) {
    // 渲染DropdownButtonFormField
  } else {
    // 显示加载中提示
  }
  

• 方案一中要确保id是唯一的，避免多个设备id重复导致断言错误

内容的提问来源于stack exchange，提问作者Tantely José