Flutter NoSuchMethodError: The method ‘markNeedsBuild‘ was called on null

淡淡的烟草味﹌ 2022-10-30 08:30 24阅读 0赞

这个错误常出现在异步任务（[Future][]）处理，比如某个页面请求一个网络API数据，根据数据刷新 Widget State。

异步任务结束在页面被pop之后，但没有检查State 是否还是 `mounted`，继续调用 `setState` 就会出现这个错误。

### 示例代码 ###

一段很常见的获取网络数据的代码，调用 `requestApi()`，等待Future从中获取`response`，进而`setState`刷新 Widget：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
</pre> </td> 
   <td> <pre>class AWidgetState extends State&lt;AWidget&gt; {
  // ...
  var data;
  void loadData() async {
    var response = await requestApi(...);
    setState((){
      this.data = response.data;
    })
  }
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

### 原因分析 ###

`response` 的获取为`async-await`异步任务，完全有可能在`AWidgetState`被 `dispose`之后才等到返回，那时候和该`State` 绑定的 `Element` 已经不在了。故而在`setState`时需要容错。

### 解决办法： `setState`之前检查是否 `mounted` ###

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre> </td> 
   <td> <pre>class AWidgetState extends State {
  // ...
  var data;
  void loadData() async {
    var response = await requestApi(...);
    if (mounted) {
      setState((){
        this.data = response.data;
      })
    }
  }
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

这个`mounted`检查很重要，其实只要涉及到异步还有各种回调(callback)，都不要忘了检查该值。

比如，在 `FrameCallback`里执行一个动画(AnimationController)：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
</pre> </td> 
   <td> <pre>@override
void initState(){
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (mounted) _animationController.forward();
  });
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

`AnimationController`有可能随着 State 一起 `dispose`了，但是`FrameCallback`仍然会被执行，进而导致异常。

又比如，在动画监听的回调里搞点事：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
</pre> </td> 
   <td> <pre>@override
void initState(){
  _animationController.animation.addListener(_handleAnimationTick);
}

void _handleAnimationTick() {
  if (mounted) updateWidget(...);
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

同样的在`_handleAnimationTick`被回调前，State 也有可能已经被`dispose`了。

[Future]: https://dart.dev/codelabs/async-await#what-is-a-future