Flutter 掛鈎使用 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());
  }, []);

Answer 2

我知道這個問題很老了。 但我希望我的回答可以幫助別人。 我通過在下一幀中調用 function 解決了這個問題

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

Answer 3

我個人使用useEffect()以肘為單位進行初始化調用，如下所示：

final cubit = useCubit<BooksListCubit>();
final state = useCubitBuilder<BooksListCubit, BooksListPageState>(cubit);

useEffect(
  () {
    cubit.init();
    return null;
  },
  [cubit],
);

在我廣泛的Flutter 肘部 + 鈎子 + Hive 教程中有更多相關信息。