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 .