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在build和modify一个祖先widget里面同步调用，不好。

您可以将fetchList调用包装在微任务中：

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

Answer 2

我知道这个问题很老了。但我希望我的回答可以帮助别人。我通过在下一帧中进行函数调用解决了这个问题

useEffect(() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      model.fetchList();
    }
}, []);