Flutter使用FutureBuilder构建下拉菜单时如何避免setState触发重复执行

• Future未缓存：你当前将brokerData直接传入FutureBuilder的future参数，每次组件触发build（包括调用setState之后）都会重新创建这个Future实例，导致异步逻辑重复执行
• 下拉选项重复追加：每次FutureBuilder的builder回调执行时，你都直接向_brokers列表中add数据，没有清空原有内容，多次执行后就会出现重复的下拉选项
• 选中报错通常是因为下拉框当前绑定的dropdownBrokers值不在去重后的items列表中，或者出现了重复的value值，触发了DropdownButton的校验规则

1. 缓存Future实例，仅初始化一次 #

在State类的initState生命周期中初始化异步请求，后续build时复用这个缓存的Future，已经完成的Future不会重复执行异步逻辑：

class YourPageState extends State<YourPage> {
  late Future<List<Broker>> _cachedBrokerData;
  List<String> _brokers = [];
  String? dropdownBrokers;

  @override
  void initState() {
    super.initState();
    // 仅在页面初始化时执行一次异步请求，替换为你原来获取brokerData的方法即可
    _cachedBrokerData = fetchBrokerData();
  }
}

之后将FutureBuilder的future参数替换为_cachedBrokerData即可。

2. 调整数据处理逻辑，避免重复追加 #

不要在FutureBuilder的builder回调中做列表追加操作，仅在第一次拿到数据时给_brokers赋值即可：

FutureBuilder <List<Broker>>(
  future: _cachedBrokerData,
  builder: (context, snapshot){
    if(snapshot.hasData){
      // 仅当_brokers为空时才赋值，避免重复添加
      if(_brokers.isEmpty) {
        _brokers = snapshot.data!.map((e) => e.firmName).toList();
      }
      // 后续的容器、下拉组件渲染逻辑保持不变

如果没有其他地方需要用到_brokers变量，也可以直接用snapshot的数据生成下拉选项，减少额外状态依赖：

items: snapshot.data!.map<DropdownMenuItem<String>>((Broker broker) {
  return DropdownMenuItem<String>(
    value: broker.firmName,
    child: Text(broker.firmName),
  );
}).toList(),

3. 校验下拉值合法性 #

确保dropdownBrokers的初始值要么为null，要么是_brokers列表中存在的值，如果异步请求回来的列表没有对应值，要主动重置dropdownBrokers为null，避免触发下拉框的参数校验报错。

内容的提问来源于stack exchange，提问作者Tinovimba Mawoyo