Flutter使用FutureBuilder、ValueChanged时setState后数据重复问题咨询

问题原因 #

• 你将listCommentsWidgets定义为State类的全局属性，这个列表的生命周期和组件状态一致，只要组件没有销毁，列表里已有的内容会一直保留。
• 每次setState触发build重执行后，FutureBuilder检测到异步任务已经完成，会再次调用generateComments方法，如果你没有手动清空列表，循环就会把当前listComments对应的组件再次追加到原有列表末尾，自然就出现了内容重复的情况。
• 你现在每次build都手动清空列表的写法虽然能正常运行，但属于冗余写法，完全没必要单独维护组件列表。

优化建议 #

Flutter是声明式UI框架，UI渲染完全由数据源驱动，你不需要提前缓存组件列表，直接删掉listCommentsWidgets这个全局变量，在需要渲染的位置根据listComments实时生成组件即可，修改后的代码逻辑更简洁，也不会出现重复追加的问题：

1. 调整generateComments方法，去掉对全局组件列表的依赖

Expanded generateComments() {
  // 实时生成组件列表，不需要存储到全局
  final List<Widget> commentWidgets = listComments.map((commentaire) {
    return CommentaireSingle(
        // 原有参数保持不变
        toRemove: updateCommentaireListing,
        responseTo: widget.responseTo);
  }).toList();

  return Expanded(
    child: Center(
      child: Container(
        width: MediaQuery.of(context).size.width * 0.90,
        child: SingleChildScrollView(
          child: Column(children: commentWidgets),
        ),
      ),
    ),
  );
}

2. 简化updateCommentaireListing方法，只需要修改数据源即可

void updateCommentaireListing(Commentaire commentaire) {
  setState(() {
    listComments.remove(commentaire);
  });
}

额外注意事项 #

• 你目前在initState中预存Future实例的写法是正确的，不会每次build都重新触发接口请求，避免了不必要的性能消耗。
• 后续如果有新增、修改评论的需求，也只需要操作listComments数据源，调用setState后UI会自动同步更新，不需要手动操作组件列表。

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