当状态改变时， StateProvider不会重建

Question

我的Riverpod有一个严重的问题。具体来说，我在Riverpod包中使用StateProvider。但是当我更新状态时，小部件树没有重新构建。我检查了新状态是否被更新，通过打印出状态来查看，我看到它们实际上被更新了。我有一些相同的情况，但当我点击热重启/重新加载页面/向上滚动，向下鼠标改变大小chrome窗口，小部件树重建一次。请帮我解释每件事最详细和容易理解。非常感谢输出新状态但UI未更新

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:math';
void main() {
runApp(const ProviderScope(child: MyApp()));
}
class Data {
final String data;
Data({required this.data});
}
final helloWorldProvider = StateProvider<Data?>((ref) => Data(data: 'No data'));
class MyApp extends ConsumerStatefulWidget {
const MyApp({super.key});
@override
ConsumerState<MyApp> createState() => _MyAppState();
}
class _MyAppState extends ConsumerState<MyApp> {
@override
void initState() {
// TODO: implement initState4
print("Init state");
super.initState();
// getData();
}
// getData() async {
//   // http.Response response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/todos/1'));
//   // final title = jsonDecode(response.body)["title"];;
//   // ref.read(helloWorldProvider.notifier).update((state) => title);
//   SharedPreferences prefs = await SharedPreferences.getInstance();
//   prefs.setString('valueTemp', 'newValue');
//   String? valueTemp = prefs.getString('valueTemp');
//   String value = valueTemp ?? '';
//   Data data = Data(data: value);
//   ref.read(helloWorldProvider.notifier).update((state) => data);
//   print("Đã thực hiện xong");
// }
void _change() {
print("change");
final rawString = generateRandomString(5);
Data data = new Data(data: rawString);
ref.watch(helloWorldProvider.notifier).update((state) => data);
print(ref.read(helloWorldProvider.notifier).state?.data);
}
String generateRandomString(int len) {
var r = Random();
return String.fromCharCodes(List.generate(len, (index) => r.nextInt(33) + 89));
}
@override
Widget build(BuildContext context) {
print('Rebuild');
final data = ref.watch(helloWorldProvider.notifier).state;
final dataText = data?.data ?? 'No text';
print(dataText);
return MaterialApp(
title: 'Google Docs Clone',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Center(
child: Column(children: [
Text(dataText)
]
)
),
floatingActionButton: FloatingActionButton(
onPressed: _change,
tooltip: 'Change',
child: const Icon(Icons.add),
),
));
}
}

我不想使用其他模式，如Provider, Bloc, StateNotifierProvider, ChangeNotifierProvider…我只想成功运行StateProvider。我参考了很多文章和stackoverflow的答案，但是我没有找到任何对我的情况有用的帮助。

Answer 1

final data = ref.watch(helloWorldProvider.notifier).state;

正在监视通知器，它很少更改。您希望看到状态的变化，如:

final data = ref.watch(helloWorldProvider);

Answer 2

修复，测试你的代码。

我推荐这篇文章Flutter Riverpod 2.0:高级Riverpod终极指南😀

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'dart:math';
void main() {
runApp(const ProviderScope(child: MyApp()));
}
class Data {
final String data;
Data({required this.data});
}
final helloWorldProvider = StateProvider<Data?>((ref) => Data(data: 'No data'));
class MyApp extends ConsumerStatefulWidget {
const MyApp({super.key});
@override
ConsumerState<MyApp> createState() => _MyAppState();
}
class _MyAppState extends ConsumerState<MyApp> {
@override
void initState() {
// TODO: implement initState4
print("Init state");
super.initState();
// getData();
}
// getData() async {
//   // http.Response response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/todos/1'));
//   // final title = jsonDecode(response.body)["title"];;
//   // ref.read(helloWorldProvider.notifier).update((state) => title);
//   SharedPreferences prefs = await SharedPreferences.getInstance();
//   prefs.setString('valueTemp', 'newValue');
//   String? valueTemp = prefs.getString('valueTemp');
//   String value = valueTemp ?? '';
//   Data data = Data(data: value);
//   ref.read(helloWorldProvider.notifier).update((state) => data);
//   print("Đã thực hiện xong");
// }
void _change() {
print("change");
final rawString = generateRandomString(5);
Data data = Data(data: rawString);
ref.read(helloWorldProvider.notifier).update((state) => data);
print(ref.read(helloWorldProvider.notifier).state?.data);
}
String generateRandomString(int len) {
var r = Random();
return String.fromCharCodes(
List.generate(len, (index) => r.nextInt(33) + 89));
}
@override
Widget build(BuildContext context) {
print('Rebuild');
final data = ref.watch(helloWorldProvider)?.data;
final dataText = data ?? 'No text';
print(dataText);
return MaterialApp(
title: 'Google Docs Clone',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Center(
child: Column(children: [Text(dataText)]),
),
floatingActionButton: FloatingActionButton(
onPressed: _change,
tooltip: 'Change',
child: const Icon(Icons.add),
),
),
);
}
}