如何从 RiverPod 中的构造函数初始化 stateProvider

问题描述

基本上，我想将初始构造函数值设置为 StateProvider，以便我可以在其子小部件中使用它。

final stateProvider = StateProvider((ref) => "default");

class ExampleWidget extends ConsumerWidget {

  ExampleWidget({required String text}){
    // how to override default hear as
    // stateProvider = text
  }

  @override
  Widget build(BuildContext context,ScopedReader watch) {
    return Column(
      children: [
        Text(watch(stateProvider).state),Container(
          child: ChildWidget(),),],);
  }
}

class ChildWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context,ScopedReader watch) {
    return Container(
      child: Text(watch(stateProvider).state),);
  }
}

那么我该如何实现呢？

我尝试了 this 但状态值没有更新。

编辑----------------

使用riverpod_hook & hooks_Flutter

final stateProvider = StateProvider((ref) => "default");

class ExampleWidget extends HookWidget {

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance?.addPostFrameCallback((_) {
      useEffect((){
        context.read(stateProvider).state = "new value";
      },[]);
    });

    final state = useProvider(stateProvider).state;
    return Column(
      children: [
        Text(state),);
  }
}

上面的代码抛出这个错误

Hooks can only be called from the build method of a widget that mix-in Hooks``

所以我尝试在build方法下像这样初始化

useEffect((){
   context.read(stateProvider).state = "new value";
},[]);

但上面的代码抛出以下错误：

The following Error was thrown building ExampleWidget(dirty,dependencies: [UncontrolledProviderScope]):
Instance of 'Error'

我只想初始化一次值，这就是我想使用 useEffect 钩子的原因。

解决方法

您无法正常访问构造函数中的提供程序。您也不应该直接在 build 方法中更新状态，因为这会导致构建错误（在您设置会导致再次重建的状态之前，小部件尚未完成构建）。

您应该能够在小部件构建后使用 addPostFrameCallback 更改状态。

例如：

class ExampleWidget extends ConsumerWidget {

  const ExampleWidget({required String text});

  final String text;

  @override
  Widget build(BuildContext context,ScopedReader watch) {
    WidgetsBinding.instance?.addPostFrameCallback((_) {
      context.read(stateProvider).state = text;
    });
    return Column(
      children: [
        Text(watch(stateProvider).state),Container(
          child: ChildWidget(),),],);
  }
}

关于您的编辑：

Hooks can only be called from the build method of a widget that mix-in Hooks

这是因为回调函数不是真正在构建方法中，它是在外部执行的。

The following Error was thrown building ExampleWidget(dirty,dependencies: [UncontrolledProviderScope]):
Instance of 'Error'

这是我在本文前面提到的构建错误的一个示例。

我想说您最好重构为仅将 StateProvider 设置为先前小部件中的文本，而不是接受文本作为参数并尝试设置它，但我认为以下内容适用于您的当前的方法，不过我再次建议您以不同的方式处理您的问题。

class ExampleWidget extends HookWidget {

  const ExampleWidget({required String text});

  final String text;

  @override
  Widget build(BuildContext context) {
    final future = useMemoized(() => Future<void>.delayed(const Duration(milliseconds: 1)));
    final snapshot = useFuture<void>(future,initialData: null);
    if (snapshot.connectionState == ConnectionState.done) {
      context.read(stateProvider).state = text;
    }

    return Column(
      children: [
        Text(useProvider(stateProvider).state),);
  }
}

通过将状态更改延迟到初始构建之后，我们可以避免构建错误。

flutter-provider riverpod