Flutter: error is Looking up a deactivated widget's ancestor is unsafe Flutter：错误是查找已停用小部件的祖先是不安全的。

Question

7 浏览2023年6月2日

匿名的 2023年6月3日

0 Comments

我正在尝试在我的Flutter应用程序中使用NodeJS进行登录，我能够成功登录，但是当我尝试在用户点击登录按钮时通过设置状态来添加一个圆形进度指示器，以等待后端处理完成时，出现以下错误：

“查找已停用的小部件祖先是不安全的。此时，小部件元素树的状态已不再稳定。为了在dispose()方法中安全地引用小部件的祖先，请保存对祖先的引用。”

而且我无法导航到另一个屏幕，但是如果我删除setState，我可以成功导航到另一个屏幕。

我的登录按钮点击事件代码如下。isLoading初始为false，当它为true时，我显示一个圆形进度指示器。

Future saveLogInData(BuildContext context) async {


  setState(() {
    isLoading = true;
  });
  final formState = _logInFormKey.currentState;
  if (formState.validate()) {
    formState.save();
    try {
      Map data = {
        "email": loginEmailController.text,
        "password": loginPasswordController.text,
      };
      print("my data is : $data");
      var response = await networkHandler.post("user/login", data);
      print("statuscode is ${response.statusCode}");
      if (response.statusCode == 200 || response.statusCode == 201) {
        Map output = json.decode(response.body);
        print(output['token']);
        setState(() {
          validate = true;
          isLoading = false;
        });
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => Home(),
          ),
        );
      } else {
        String output = json.decode(response.body);
        print("output is ${output}");
        setState(() {
          validate = false;
          isLoading = false;
        });
      }
    } catch (e) {
      print("error is $e}");
    } finally {
      isLoading = false;
    }
  } else {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Error"),
          content: Text("Please check your email and password"),
          actions: [
            FlatButton(
              child: Text("Close"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            )
          ],
        );
      },
    );
  }
}

0

2 答案

匿名的 · Answer 1 · 2023-07-24T04:20:00+00:00

问题原因：在widget被deactivated之后仍然调用了setState方法，导致查找widget的祖先变得不安全。

解决方法一：在调用setState之前加上判断，只有当widget被mounted时才调用setState方法。

if(mounted) setState(() => ...);

解决方法二：重写setState方法，使所有的setState调用都变得安全。

void setState(fn) {


    if(mounted) super.setState(fn);
}

解决方法三：如果仍然希望在下一帧中改变state，可以尝试在下一帧中推送路由。

WidgetsBinding.instance.addPostFrameCallback((_) {


    Navigator.of(context).push(...);
});

注意：以上三种方法都无法解决问题，仍然会出现"Looking up a deactivated widget's ancestor is unsafe"错误。如果移除setState方法，导航正常工作。

匿名的 · Answer 2 · 2023-07-15T13:58:21+00:00

Flutter中的错误"Looking up a deactivated widget's ancestor is unsafe"通常是由于使用了setState导致的。解决这个问题的方法是使用ChangeNotifier。

在Flutter中，setState是用于更新widget状态的方法。当我们在一个widget中调用setState时，它会重新构建widget树并更新状态。然而，在某些情况下，当widget被销毁或不再可用时，调用setState可能会导致上述错误。

为了解决这个问题，我们可以使用Flutter的ChangeNotifier和Provider来管理状态。ChangeNotifier是一个用于通知监听器状态变化的类，而Provider则是一个用于将状态提供给子widget的工具。

下面是一个示例代码，演示了如何使用ChangeNotifier和Provider来处理状态变化：


import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class MyModel extends ChangeNotifier {
  int _counter = 0;
  int get counter => _counter;
  void increment() {
    _counter++;
    notifyListeners();
  }
}
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, myModel, child) {
        return Text(
          'Counter: ${myModel.counter}',
          style: TextStyle(fontSize: 24),
        );
      },
    );
  }
}
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => MyModel(),
      child: MyApp(),
    ),
  );
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MyWidget(),
              RaisedButton(
                child: Text('Increment'),
                onPressed: () {
                  Provider.of(context, listen: false).increment();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个MyModel类来管理计数器的状态。当increment方法被调用时，计数器会增加，并通过notifyListeners通知监听器状态发生了变化。

在MyWidget中，我们使用了Consumer来订阅MyModel的变化。这意味着当MyModel的状态发生变化时，MyWidget会自动更新。所以我们不再需要使用setState来手动更新widget。

在main函数中，我们使用ChangeNotifierProvider将MyModel提供给子widget。这样，子widget就可以通过Provider.of来获取MyModel的实例，并调用其中的方法或访问属性。

通过使用ChangeNotifier和Provider，我们可以避免使用setState导致的"Looking up a deactivated widget's ancestor is unsafe"错误，并更加方便地管理和共享状态。