setState() or markNeedsBuild() called during build 에러 원인과 해결

 setState() or markNeedsBuild() called during build  에러의 원인

정진규 Software Engineer 노션에 따르면 마치 Null Pointer Exception과 같은 광범위한 에러이다. 따라서 에러가 발생하는 시점에 관한 코드를 자세히 살펴보는 것이 좋다. 에러의 원인은 말 그대로 UI를 이미 빌드하고 있는데 해당 UI가 구독하고 있는 state에 변경이 일어나서 또 변경하게 생겼다는 것이다. 

 

 

 setState() or markNeedsBuild() called during build  에러 원인 분석

나의 경우에는 TestPage에 진입을 시도할 때마다 해당 에러가 발생하였다. 따라서 TestPage를 살펴보았다. TestPage는 TestState의 Consumer로서 TestState에 변경이 일어나면 rebuild를 하게 되어있다. 그런데  build()  부분에는 testState에 변경을 가하는 부분을 찾아볼 수 없었고, state를 읽어오는 부분 밖에 없었다.

 

진입을 시도할 때마다 해당 에러가 발생하는 점 때문에 TestPage  initState() 를 주목하였다. 그랬더니 아래 코드와 같이 UI를 빌드하는 코드에서 ChangeNotifier인 TestState class를 건드리고 있었다. ( testState.startNewTest()  부분)

@override 
void initState() {
    super.initState();
    final testState = context.read<TestState>();
    audioTimer = testState.audioTimer;
    testState.startNewTest();
    // 퀴즈 종료 시 이동할 화면 설정
    testState.setOnTestEnd(() {
      if (mounted) {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => const EndingPage()),
        );
      }
    });
}

 

즉, initState()가 실행된 다음에 build()가 실행되는데, initState()에 들어있는 testState.startNew()가 내부적으로 notifyListener()를 트리거하게 되고, build()가 UI를 그리고 있는 와중에 이 변경을 감지하면 이를 막기 위해 flutter가  setState() or markNeedsBuild() called during build  에러를 발생시키는 것이다. 

 

 

 setState() or markNeedsBuild() called during build  에러 해결

build()가 모두 완료된 후에 상태변경을 보장할 수 있도록  addPostFrameCallback 를 사용한다. 

@override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      final testState = context.read<TestState>();
      audioTimer = testState.audioTimer;
      testState.startNewTest();
      // 퀴즈 종료 시 이동할 화면 설정
      testState.setOnTestEnd(() {
        if (mounted) {
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (context) => const EndingPage()),
          );
        }
      });
    });
  }