如何避免遗漏mounted判断导致Flutter的setState报错？

不想每次调用setState都手动判断mounted？可以试试下面这些更省心的方案：

1. 封装安全的setState到基类 #

自己写一个通用基类，把判断mounted的逻辑封装进去，所有业务页面都继承这个基类，之后直接调用封装好的方法即可：

abstract class BaseState<T extends StatefulWidget> extends State<T> {
  void safeSetState(VoidCallback fn) {
    if (mounted) {
      setState(fn);
    }
  }
}

// 使用示例
class MyPageState extends BaseState<MyPage> {
  void updateData(DetailModel model) {
    safeSetState(() {
      _detailModel = model;
    });
  }
}

只需要写一次判断逻辑，所有页面复用，再也不用担心遗漏判断。

2. 用FutureBuilder/StreamBuilder替代手动setState #

如果是HTTP请求这类异步场景，直接用FutureBuilder包裹UI，它会自动监听异步任务的状态，并且在组件销毁时停止更新，完全不用手动处理mounted：

FutureBuilder<DetailModel>(
  future: _fetchDetailFuture, // 建议将Future存到initState中避免重复请求
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!.title);
    } else if (snapshot.hasError) {
      return Text('请求失败：${snapshot.error}');
    }
    return const CircularProgressIndicator();
  },
)

// 对应initState代码
@override
void initState() {
  super.initState();
  _fetchDetailFuture = fetchDetailData();
}

3. 取消异步任务的订阅/操作 #

从根源上避免异步任务完成后调用setState，可以在组件dispose时取消任务：

• 使用CancelableOperation（需引入async包）：

CancelableOperation? _fetchOperation;

@override
void initState() {
  super.initState();
  _fetchOperation = CancelableOperation.fromFuture(fetchDetailData());
  _fetchOperation.value.then((model) {
    setState(() {
      _detailModel = model;
    });
  });
}

@override
void dispose() {
  _fetchOperation?.cancel();
  super.dispose();
}

• 若使用Dio网络库，可借助CancelToken：

final CancelToken _cancelToken = CancelToken();

void fetchData() {
  dio.get('/detail', cancelToken: _cancelToken).then((response) {
    setState(() {
      _detailModel = DetailModel.fromJson(response.data);
    });
  });
}

@override
void dispose() {
  _cancelToken.cancel();
  super.dispose();
}

4. 使用状态管理库 #

像flutter_bloc、Provider、GetX这类状态管理库，本身就内置了生命周期处理逻辑。以GetX为例，它的响应式变量会自动判断组件是否存活，无需手动处理mounted：

final Rx<DetailModel?> detailModel = Rx<DetailModel?>(null);

void fetchData() async {
  final model = await fetchDetailData();
  detailModel.value = model; // 组件销毁时自动停止更新，不会报错
}

// UI中直接使用响应式变量
Obx(() => Text(detailModel.value?.title ?? ''));

内容的提问来源于stack exchange，提问作者无夜之星辰