时间戳

首页 > 解决方案 > 尽管更新了提供程序，但 Flutter Hooks Riverpod 未更新小部件

flutter - 尽管更新了提供程序，但 Flutter Hooks Riverpod 未更新小部件

问题描述

我已经研究 Flutter 几个月了，现在我正在试验 Hooks 和 Riverpod，这非常重要，因此提供者可以缓存一些结果并重复使用，并且只有在有更新时才真正重新获取。

但是我在这里遇到了一个问题，即我无法围绕提供程序更新来反映在小部件中。可以从这里查看完整示例 -> https://github.com/codespair/riverpod_update_issue我添加了一些调试打印，我可以看到提供程序已正确刷新，但更改不会反映在小部件上。

该示例有一个工作示例提供程序：

// create simple FutureProvider with respective future call next
final futureListProvider =
    FutureProvider.family<List<String>, int>((ref, value) => _getList(value));

// in a real case there would be an await call inside this function to network or local db or file system, etc...
Future<List<String>> _getList(int value) async {
  List<String> result = [...validValues];
  if (value == -1) {
    // do nothing just return original result...
  } else {
    result = []..add(result[value]);
  }
  debugPrint('Provider refreshed, result => $result');
  return result;
}

更改时下拉列表刷新提供程序：

             Container(
                  alignment: Alignment.center,
                  padding: EdgeInsets.fromLTRB(5, 2, 5, 1),
                  child: DropdownButton<String>(
                    key: UniqueKey(),
                    value: dropDownValue.value.toString(),
                    icon: Icon(Icons.arrow_drop_down),
                    iconSize: 24,
                    elevation: 16,
                    underline: Container(
                      height: 1,
                      color: Theme.of(context).primaryColor,
                    ),
                    onChanged: (String? newValue) {
                      dropDownValue.value = newValue!;
                      context
                          .refresh(futureListProvider(intFromString(newValue)));
                    },
                    items: validValues
                        .map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(
                          value,
                          style: Theme.of(context).primaryTextTheme.subtitle1,
                        ),
                      );
                    }).toList(),
                  ),
                ),

还有一个简单的列表，它使用提供者元素进行渲染，尽管提供者被正确刷新，正如您在 debugPrinting 中看到的那样，它永远不会更新：

Container(
          key: UniqueKey(),
          height: 200,
          child: stringListProvider.when(
            data: (stringList) {
              debugPrint('List from Provider.when $stringList');
              return MyListWidget(stringList);
              // return _buildList(stringList);
            },
            loading: () => CircularProgressIndicator(),
            error: (_, __) => Text('OOOPsss error'),
          ),
        ),
      ]),


class MyListWidget extends HookWidget {
  final GlobalKey<ScaffoldState> _widgetKey = GlobalKey<ScaffoldState>();
  final List<String> stringList;

  MyListWidget(this.stringList);

  @override
  Widget build(BuildContext context) {
    debugPrint('stringList in MyListWidget.build $stringList');
    return ListView.builder(
      key: _widgetKey,
      itemCount: stringList.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          key: UniqueKey(),
          child: Padding(
              padding: EdgeInsets.all(10), child: Text(stringList[index])),
        );
      },
    );
  }

在评估开发某些应用程序的方法时，我倾向于采用更直接的方法来处理此类情况，因此我也愿意评估更简单、更直接的方法，但我真的很喜欢一些功能，例如来自 hooks_riverpod 的 useMemoized、useState .

标签： flutterproviderriverpodflutter-hooks

解决方案

在我们开始之前我想注意的一件事是你仍然可以在没有 hooks_riverpod 和flutter_hooksuseMemoized的情况下使用,useState等。

就您的问题而言，您在滥用family. 当您将新值传递给 时family，您实际上是在创建另一个提供程序。这就是您的列表打印正确的原因，因为它是正确的，但正确的结果卡在您没有阅读的 ProviderFamily 中。

更简单的方法是创建一个 StateProvider 用于存储当前选择的值并从 FutureProvider 监视该提供程序。它将自动更新列表而无需refresh.

final selectedItemProvider = StateProvider<int>((_) => -1);

final futureListProvider = FutureProvider<List<String>>((ref) async {
  final selected = ref.watch(selectedItemProvider).state;
  return _getList(selected);
});

DropdownButton<String>(
  ...
  onChanged: (String? newValue) {
    dropDownValue.value = newValue!;
    context.read(selectedItemProvider).state = intFromString(newValue);
  },
}

推荐阅读