Flutter开发Quiz应用报构建期调用setState()/markNeedsBuild()错误求解

报错现象 #

开发简易测验应用时遇到持续超1天的顽固报错，核心报错信息：
setState() or markNeedsBuild() called during build, widget was currently being built when offending call was made
报错含义为：组件构建流程中违规调用了setState()或markNeedsBuild()方法，触发违规调用时目标组件正处于渲染构建阶段，堆栈指向Quiz组件构建时触发了MyApp的状态更新逻辑。

根因定位 #

代码存在两处直接触发报错的逻辑错误：

• 传参错误：quiz.dart的build方法中，遍历答案生成Answer组件时传入了answerQuestion()——带括号的写法是立即执行函数，会在Quiz组件每次build渲染时直接触发_answerQuestion方法，而该方法内部包含setState调用，等于在构建过程中直接触发状态更新，完全命中报错规则。
• 状态更新顺序错误：main.dart中的_answerQuestion方法先调用空的setState，再修改_questionIndex变量，setState执行时状态值未发生任何变化，界面刷新逻辑完全失效。

修复方案 #

1. 修正quiz.dart中的函数传参 #

将遍历答案部分的立即执行函数改为传函数引用，去掉answerQuestion后面的括号，避免构建阶段直接执行方法：
原错误代码：

...(questions[questionIndex]['answers'] as List<String>).map((answer) {
  return Answer(answerQuestion(), answer);
}).toList()

修正后代码：

...(questions[questionIndex]['answers'] as List<String>).map((answer) {
  return Answer(answerQuestion, answer);
}).toList()

2. 修正main.dart中的状态更新逻辑 #

调整_answerQuestion方法内的执行顺序，先更新题号变量，再通过setState触发界面刷新，将状态修改逻辑包裹在setState回调内：
原错误代码：

void _answerQuestion() {
  setState(() {});
  _questionIndex = _questionIndex + 1;
  print(_questionIndex);

  if (_questionIndex < _questions.length) {
    print('We have more Questions for you !!');
  } else {
    print('No more questions left !!');
  }
}

修正后代码：

void _answerQuestion() {
  setState(() {
    _questionIndex = _questionIndex + 1;
  });
  print(_questionIndex);

  if (_questionIndex < _questions.length) {
    print('We have more Questions for you !!');
  } else {
    print('No more questions left !!');
  }
}

效果验证 #

完成上述两处修改后重启应用，只有用户点击答案按钮时才会触发题号累加、界面刷新，不会再在组件构建阶段自动触发setState，报错完全消失，答完所有题目后会正常跳转至Result结果页。

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