Flutter问题：setState无法更新Widget状态

问题核心 #

你遇到的问题本质是：更新Firestore文档后，本地的widget.challengesRecord实例并未同步更新，仍然是修改前的旧数据。虽然调用了setState，但UI判断依赖的是旧对象的createdFundraiser数组，所以按钮文本不会变化；重新进入页面时会重新获取最新Firestore数据，传入新的challengesRecord实例，这时候UI才会更新。另外，UniqueKey只能强制组件重建，但如果父组件传入的还是旧的challengesRecord实例，重建后依然用旧数据，起不到实时更新的作用。

解决方案1：更新后重新获取最新文档并维护本地状态 #

在Firestore更新完成后，主动获取最新的文档数据，用本地状态保存，不再直接依赖外部传入的widget.challengesRecord：

class fundraiserFlowWidget extends StatefulWidget {
  const fundraiserFlowWidget({Key key, this.challengesRecord}) : super(key: key);
  
  final ChallengesRecord challengesRecord;
  
  @override
  State<fundraiserFlowWidget> createState() => _fundraiserFlowWidgetState();
}

class _fundraiserFlowWidgetState extends State<fundraiserFlowWidget> {
  // 本地维护最新的筹款活动记录
  ChallengesRecord _latestChallengesRecord;

  @override
  void initState() {
    super.initState();
    _latestChallengesRecord = widget.challengesRecord;
  }

  @override
  void didUpdateWidget(covariant fundraiserFlowWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 父组件传入新实例时同步更新本地状态
    if (widget.challengesRecord != oldWidget.challengesRecord) {
      _latestChallengesRecord = widget.challengesRecord;
    }
  }

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      text: _latestChallengesRecord
              .createdFundraiser
              .contains(currentUserReference) 
          ? 'Visit Fundraiser' 
          : 'Create Fundraiser!',
      onPressed: () async {
        final challengesUpdateData = {
          'createdFundraiser': FieldValue.arrayUnion([currentUserReference])
        };
        await _latestChallengesRecord.reference.update(challengesUpdateData);
        
        // 重新获取最新文档数据并更新状态
        final updatedDoc = await _latestChallengesRecord.reference.get();
        setState(() {
          _latestChallengesRecord = ChallengesRecord.fromSnapshot(updatedDoc);
        });

        final url = url; // 确保此处url变量已正确定义
        await launchUrl(Uri.parse(url), mode: LaunchMode.inAppWebView);
      },
    );
  }
}

解决方案2：用StreamBuilder实时监听文档变化 #

通过StreamBuilder监听Firestore文档的实时变化，远程数据更新时UI会自动刷新，无需手动调用setState：

class fundraiserFlowWidget extends StatelessWidget {
  const fundraiserFlowWidget({Key key, this.challengesRecord}) : super(key: key);
  
  final ChallengesRecord challengesRecord;
  
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<DocumentSnapshot>(
      stream: challengesRecord.reference.snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return const CircularProgressIndicator();
        }
        final latestRecord = ChallengesRecord.fromSnapshot(snapshot.data);
        return FlatButton(
          text: latestRecord
                  .createdFundraiser
                  .contains(currentUserReference) 
              ? 'Visit Fundraiser' 
              : 'Create Fundraiser!',
          onPressed: () async {
            final challengesUpdateData = {
              'createdFundraiser': FieldValue.arrayUnion([currentUserReference])
            };
            await challengesRecord.reference.update(challengesUpdateData);

            final url = url;
            await launchUrl(Uri.parse(url), mode: LaunchMode.inAppWebView);
          },
        );
      },
    );
  }
}

该方案不仅能处理当前操作的更新，还能同步其他设备或页面对该文档的修改。

解决方案3：仅维护本地状态标记 #

如果只需要处理当前操作后的UI变化，不需要同步其他来源的修改，可以直接维护一个本地布尔状态：

class fundraiserFlowWidget extends StatefulWidget {
  const fundraiserFlowWidget({Key key, this.challengesRecord}) : super(key: key);
  
  final ChallengesRecord challengesRecord;
  
  @override
  State<fundraiserFlowWidget> createState() => _fundraiserFlowWidgetState();
}

class _fundraiserFlowWidgetState extends State<fundraiserFlowWidget> {
  bool _hasCreatedFundraiser;

  @override
  void initState() {
    super.initState();
    _hasCreatedFundraiser = widget.challengesRecord.createdFundraiser.contains(currentUserReference);
  }

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      text: _hasCreatedFundraiser ? 'Visit Fundraiser' : 'Create Fundraiser!',
      onPressed: () async {
        if (_hasCreatedFundraiser) {
          // 已创建时直接打开链接
          final url = url;
          await launchUrl(Uri.parse(url), mode: LaunchMode.inAppWebView);
          return;
        }
        
        final challengesUpdateData = {
          'createdFundraiser': FieldValue.arrayUnion([currentUserReference])
        };
        await widget.challengesRecord.reference.update(challengesUpdateData);
        
        setState(() {
          _hasCreatedFundraiser = true;
        });

        final url = url;
        await launchUrl(Uri.parse(url), mode: LaunchMode.inAppWebView);
      },
    );
  }
}

这个方案实现最简单，适合场景单一的需求。

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