Flutter 使用 useEffect 从服务器获取数据并出现 return 类型错误

Question

在实现一个简单的 riverpod 库来发送请求并从服务器获取响应后，当我尝试为此使用 useEffect 时，出现此错误：

Error: A value of type 'Future<NetworkRequestState<Posts>>' 
can't be returned from a function with return type 'void Function()?'.

Riverpod 存储库实现：

final getPostProvider = Provider((ref) => PostRepository(ref.read));
final postProvider =
    StateNotifierProvider<PostNotifier, NetworkRequestState<Posts>>(
  (ref) => PostNotifier(
    ref.watch(getPostProvider),
  ),
);

class PostRepository {
  final Reader _reader;

  PostRepository(this._reader);

  Future<Posts> requestGetPosts() async {
    try {
      const r = RetryOptions(maxAttempts: 3);
      final response = await r.retry(
        () => _reader(dioProvider)
            .get(Server.$posts,
                options: Options(
                  headers: {'Content-Type': 'application/json'},
                ))
            .timeout(const Duration(seconds: 30)),
        retryIf: (e) => e is SocketException || e is TimeoutException,
      );

      return Posts.fromJson(response.data as Map<String, dynamic>);
    } on DioError catch (e) {
      throw e.error as Object;
    }
  }
}

class PostNotifier extends RequestStateNotifier<Posts> {
  final PostRepository _postRepository;

  PostNotifier(this._postRepository);

  Future<NetworkRequestState<Posts>> getPosts() =>
      makeRequest(() =>
          _postRepository.requestGetPosts());
}

和HookWidget class:

class Home extends HookWidget {
  @override
  Widget build(BuildContext context) {
    useEffect(() => useProvider(postProvider.notifier).getPosts());

    //...
}

完全错误：

lib/src/home/home.dart:20:56: Error: A value of type 'Future<NetworkRequestState<Posts>>' can't be returned from a function with return type 'void Function()?'.
 - 'Future' is from 'dart:async'.
 - 'NetworkRequestState' is from 'package:xxxxxxxxxx/service/freezed/network_request_state.dart' ('lib/service/freezed/network_request_state.dart').
 - 'Posts' is from 'package:xxxxxxxxxx/src/home/model/posts.dart' ('lib/src/home/model/posts.dart').
    useEffect(() => useProvider(postProvider.notifier).getPosts());
                                                       ^

Answer 1

useProvider 不会 return void Function()? 并且 useEffect 期望 void Function()? 被 return 编辑。

这样做：

useEffect((){
  useProvider(postProvider.notifier).getPosts();
  return (){};
});

或者您可以选择不 return 任何东西，如下所示：

useEffect((){
  useProvider(postProvider.notifier).getPosts();
});

注意：考虑转向新版本的 hooks_riverpod，因为 useProvider 已被弃用。

修复：无法收听 HookState.initState 中继承的小部件。使用 HookState.build 代替

因为useProvider是一个钩子，所以你不必把它放在useEffect

就这样：

 Widget build(BuildContext context) {
    useProvider(postProvider.notifier).getPosts();

Flutter 使用 useEffect 从服务器获取数据并出现 return 类型错误

Flutter using useEffect to get data from server and getting return type error

flutter

dart

riverpod

hook-widgets