Flutter中useEffect钩子使用报错，求正确实现方案

Flutter原生类组件没有useEffect方法，你遇到的报错是因为直接在State类里调用了不存在的方法。下面给你两种对应React useEffect的实现方式：

1. 类组件用生命周期方法替代 #

React里useEffect(() => {}, [])对应类组件的初始化执行一次，可以用initState方法；如果需要监听依赖变化（比如props更新），则用didUpdateWidget。

修改你的类组件代码：

import 'dart:developer';
import 'package:flutter/material.dart';

class MarketRunnerChart extends StatefulWidget {
  const MarketRunnerChart({Key? key}) : super(key: key);

  @override
  State<MarketRunnerChart> createState() => _MarketRunnerChartState();
}

class _MarketRunnerChartState extends State<MarketRunnerChart> {
  @override
  void initState() {
    super.initState();
    // 对应useEffect空依赖，组件初始化时执行一次
    log('okok');
  }

  // 如果需要监听依赖变化（比如props更新），重写didUpdateWidget
  @override
  void didUpdateWidget(covariant MarketRunnerChart oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 对比新旧props，比如判断某个属性变化后执行逻辑
    // if (widget.someProp != oldWidget.someProp) {
    //   log('依赖更新了');
    // }
  }

  @override
  Widget build(BuildContext context) {
    return Text("Some text");
  }
}

2. 函数组件+flutter_hooks包实现类似useEffect #

如果你更习惯React Hooks的写法，可以用第三方包flutter_hooks，它提供了和React类似的钩子：

步骤： #

1. 在pubspec.yaml添加依赖：

dependencies:
  flutter_hooks: ^0.18.6 # 请使用最新版本

2. 改用HookWidget，在build方法里使用useEffect：

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class MarketRunnerChart extends HookWidget {
  const MarketRunnerChart({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 完全对应React的useEffect，空依赖则只执行一次
    useEffect(() {
      log('okok');
      // 可选：返回清理函数，对应useEffect的返回值
      return () => log('组件销毁时执行清理');
    }, []);

    return Text("Some text");
  }
}

内容的提问来源于stack exchange，提问作者Lenny4