Flutter：父组件状态变量传子组件的空值问题解决

问题描述 #

将Flutter主分类详情页的卡片代码从父组件抽离成独立的MainCategoryDetailInfoCard子组件后，出现「空值检查运算符使用在空值上」错误。原代码作为父组件内函数时，可正常根据API异步加载状态刷新页面；抽离后因初始mainCategory为空，子组件处理异步数据时出现异常。

相关代码 #

父组件MainCategoryDetailScreen代码 #

class MainCategoryDetailScreen extends Stateful Widget {
  final String mainCategoryId;

  MainCategoryDetailScreen({required this.mainCategoryId});

  @override
  State<MainCategoryDetailScreen> createState() =
      _MainCategoryDetailScreenState();
}

class _MainCategoryDetailScreenState extends State<MainCategoryDetailScreen> {
  final _mainCategoryProvider = Get.find<MainCategoryProvider>();
  late MainCategoryModel _mainCategory;
  bool isMainCategoryLoading = true;

  @override
  void initState() {
    super.initState();
    _getMainCategory();
  }

  void _getMainCategory() async {
    _mainCategoryProvider
        .getMainCategory(widget.mainCategoryId)
        .then((mainCategory) {
      setState(() {
        _mainCategory = mainCategory;
        isMainCategoryLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: title(
        context,
        titleText: 'Page title',
      ),
      body: Padding(
        child: SafeArea(
          child: Column(
            children: [
              // ...,
              MainCategoryDetailInfoCard(
                  mainCategory: _mainCategory!,
                  isLoading: isMainCategoryLoading),
              // ...,
            ],
          ),
        ),
      ),
    );
  }
}

子组件MainCategoryDetailInfoCard代码 #

class MainCategoryDetailInfoCard extends Stateful Widget {
  MainCategoryModel? mainCategory;
  bool isLoading;

  MainCategoryDetailInfoCard(
      {required this.mainCategory, required this.isLoading});

  @override
  State<MainCategoryDetailInfoCard> createState() =
      _MainCategoryDetailInfoCardState();
}

class _MainCategoryDetailInfoCardState
    extends State<MainCategoryDetailInfoCard> {
  MainCategoryModel? mainCategory;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    mainCategory = widget.mainCategory;
    isLoading = widget.isLoading;
  }

  @override
  Widget build(BuildContext context) {
    print("Info card is built");
    return Column(children: [
      subTitle(
        titleText: 'Infos',
      ),
      labelledInfo(
        label: 'Name',
        value: isLoading ? '' : mainCategory!.name,
        isLoading: isLoading,
      ),
      // ... Rest of infos,
    ]);
  }
}

报错信息 #

════════ Exception caught by widgets library ═══════════════════════════════════
The following _TypeError was thrown building MainCategoryDetailScreen(dirty, state: _MainCategoryDetailScreenState#025bc):
Null check operator used on a null value

The relevant error-causing widget was
MainCategoryDetailScreen.  main_category_list_screen.dart:87

错误原因 #

1. 父组件初始空值解包：父组件使用late MainCategoryModel _mainCategory;延迟初始化，但API返回前的首次build中，_mainCategory未被赋值，此时用!强制解包直接触发空值错误。
2. 子组件状态未同步：子组件State在initState中仅初始化一次mainCategory和isLoading变量，父组件通过setState更新参数后，子组件不会自动同步最新值，导致数据加载完成后仍使用初始空值。

解决方法 #

1. 修复父组件空值问题 #

将_mainCategory改为可空类型，避免初始强制解包：

// 替换原late变量定义
MainCategoryModel? _mainCategory;

传递给子组件时直接传变量，无需强制解包：

MainCategoryDetailInfoCard(
  mainCategory: _mainCategory,
  isLoading: isMainCategoryLoading,
),

2. 修复子组件状态同步问题 #

子组件State无需维护独立的状态变量，直接使用widget的参数，确保父组件更新时能获取最新值：

class _MainCategoryDetailInfoCardState extends State<MainCategoryDetailInfoCard> {
  // 删除自行维护的mainCategory和isLoading变量

  @override
  Widget build(BuildContext context) {
    print("Info card is built");
    return Column(children: [
      subTitle(
        titleText: 'Infos',
      ),
      labelledInfo(
        label: 'Name',
        // 使用widget的参数，并用??处理空值兜底
        value: widget.isLoading ? '' : widget.mainCategory?.name ?? '',
        isLoading: widget.isLoading,
      ),
      // 其他信息项同理，均使用widget.xxx并处理空值
    ]);
  }
}

3. 可选优化：父组件加载状态前置处理 #

在父组件中先判断加载状态，显示加载指示器，避免子组件处理空值：

body: Padding(
  child: SafeArea(
    child: isMainCategoryLoading 
        ? Center(child: CircularProgressIndicator()) // 加载中显示指示器
        : Column(
            children: [
              // ...,
              MainCategoryDetailInfoCard(
                  mainCategory: _mainCategory!, // 加载完成后可安全解包
                  isLoading: isMainCategoryLoading),
              // ...,
            ],
          ),
  ),
),

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