Flutter Hooks Получение данных с помощью useEffect - setState() или markNeedsBuild(), вызываемых во время сборки

В настоящее время изучаю functions_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),
    ),
  );
}

Я не думаю, что это правильный путь, так как он вызывает ошибку.https://i.stack.imgur.com/8AzIb.png

3 ответа

Решение

Проблема с:

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

в том, что fetchList вызывается синхронно внутри построения и изменения виджета-предка, что нехорошо.

Вы можете обернуть fetchList позвоните в микрозадачу:

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

Я знаю, что этот вопрос старый. Но я надеюсь, что мой ответ может помочь кому-то. Я решил проблему, сделав вызов функции в следующем кадре

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

Лично я использовалuseEffect()чтобы сделать вызовы init в кубитах, например:

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

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

Подробнее об этом в моем обширном туториале Flutter cubits + hooks + Hive .

Другие вопросы по тегам