Flutter Hooks 使用 useEffect 获取数据 - setState() 或 markNeedsBuild() 在构建期间调用

Question

目前正在探索functional_widgets 和flutter_hooks。对 reactjs 有同样的想法，我正在使用以下代码获取数据。

@hwidget
Widget homeScreen(BuildContext context) {
  TodoListProvider model = Provider.of<TodoListProvider>(context);
  useEffect(() {
    print('effect');
    model.fetchList();
    return () => {};
  }, []);
  return Scaffold(
    appBar: _buildAppbar(context, model),
    bottomNavigationBar: _buildBottomNav(context, model),
    floatingActionButton: _buildFloatingAction(context),
    body: PageTransitionSwitcher(
      duration: const Duration(milliseconds: 300),
      reverse: model.reverse,
      transitionBuilder: (
        Widget child,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
      ) {
        return SharedAxisTransition(
          child: child,
          animation: animation,
          secondaryAnimation: secondaryAnimation,
          transitionType: SharedAxisTransitionType.horizontal,
        );
      },
      child: _getCurrentTab(model.currentIndex),
    ),
  );
}

我不认为这是正确的方法，因为它会引发错误。

Answer 1

问题在于:

  useEffect(() {
    model.fetchList();
  }, []);

是fetchList在构建和修改祖先小部件内部同步调用，这是不好的。
您可以包装 fetchList调用微任务:

  useEffect(() {
    Future.microtask(() => model.fetchList());
  }, []);