Flutter - State类之mounted

原创

挥刀北上

修改于 2021-01-14 18:09:53

1.9K0

修改于 2021-01-14 18:09:53

文章被收录于专栏：Node.js开发Node.js开发

假设我们有这样一个页面，如图：

其中时钟列表页面的数据需要发送异步请求，然后调用setState，代码如下：

class CHWidgetState extends State<CHWidget> {
  // ...
  var data;
  void loadData() async {
    var response = await requestApi(...);
    setState((){
      this.data = response.data;
    })
  }
}

但是这样完成后，我们在点击页面左边导航切换右边页面是，有时会报错，报错信息如下：

setState() called after dispose()

这里有两个问题：

1、为什么会报错？

2、报错为什么有时会有，有时不报错呢？

这是因为，右变组件在渲染时，组件会创建一个State对象，这个对象保存当前渲染组件的所有信息这个State被保存在闭包中。

我们看一下调用setState的代码：

class CHWidgetState extends State<CHWidget> {
  // ...
  var data;
  void loadData() async {
    var response = await requestApi(...);
    setState((){
      this.data = response.data;
    })
  }
}

观察代码，我们发现，setState在调用时需要等待异步请求的数据返回，但是有时候用户切换过快，在数据还没返回时就切换页面了，当前这个组件被销毁会调用dispose，一段时间后异步请求数据返回，组件调用setState但是此时组件已经被销毁，此时就会报错，所以我们要加一个判断，这个判断就是一句mounted，就是判断组件是否是挂载状态，如果是挂载状态，则可以调用此组件的setState，如果不是挂载状态，抱歉不能调用，代码更改如下：


class AWidgetState extends State {
  // ...
  var data;
  void loadData() async {
    var response = await requestApi(...);
    if (mounted) {
      setState((){
        this.data = response.data;
      })
    }
  }
}

以上便是mounted的使用，希望对你有所帮助。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

flutter

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

flutter

登录后参与评论

0 条评论

热度