Flutter Dart setState无法正常工作:未处理的异常:在构造函数中调用了setState():...(生命周期状态:已创建，没有窗口小部件，未安装) [英] Flutter Dart setState not working: Unhandled Exception: setState() called in constructor: ...(lifecycle state: created, no widget, not mounted)

问题描述

我是飞镖新手.我正在更改通过 flutter create 命令创建的默认应用.这是代码(我想显示来自EventSource的信息):

I am new to dart / flutter. I am changing the default app created by flutter create command. This is the code (I want to show information from EventSource):

import 'dart:async';
import 'package:w3c_event_source/event_source.dart';
import 'package:flutter/material.dart';
import 'blocs/main_bloc.dart';

void main() async {
    runApp(MyApp());
    final events = EventSource(Uri.parse("https://example.com/broadcast/"));
    final subscription = events.events.listen((MessageEvent message) {
      var myhomepagestate = MyHomePageState();
      myhomepagestate.eventsource_message = '${message.data}';
      //print('${message.data}');
    });  
  
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'EXAMPLE',
      home: MyHomePage(title: 'EXAMPLE'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  var _myeventsource = "";
  
  void set eventsource_message(message) {
    //if (!mounted) return;
    setState(() {
      _myeventsource = message;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'EventSource:',
            ),
            Text(
              '$_myeventsource',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

在此命令处出现错误:

setState(() {
  _myeventsource = message;
});

错误是:未处理的异常:构造函数中调用了setState():MyHomePageState#8034c(生命周期状态:已创建，没有窗口小部件，未安装)

我搜索了一天，找不到解决方案.有人可以暗示我应该研究什么吗?我可以只命名元素，然后像HTML DOM一样直接更改元素吗?

I have searching for one day and can't find the solution. Can anybody give a hint what I should look into? Can I just name the element, then change the element directly like HTML DOM?

谢谢.

推荐答案

您正在实例化一个MyHomePageState小部件，该小部件将不需要执行.而是，您必须实例化MyHomePage.但是，由于MyHomePage仍未安装在任何地方，因此无法在这种情况下使用.您只是实例化它，然后尝试设置该值.

You are instantiating a MyHomePageState widget that you will never need to do. Instead, you have to instantiate the MyHomePage. It does not work in this context though because MyHomePage is still not mounted anywhere. You are just instantiating it and trying to set the value.

从主要方法中删除此部分:

Remove this part from the main method:

final events = EventSource(Uri.parse("https://example.com/broadcast/"));
final subscription = events.events.listen((MessageEvent message) {
  var myhomepagestate = MyHomePageState();
  myhomepagestate.eventsource_message = '${message.data}';
  //print('${message.data}');
});

---

像这样修改MyHomePageState(添加initState和dispose方法.它们就像构造函数和析构函数一样):

---

Modify your MyHomePageState like this (Add initState and dispose methods. They are like constructors and destructors):

class MyHomePageState extends State<MyHomePage> {
  String _myeventsource = "";
  
  /**
  void set eventsource_message(message) {
    //if (!mounted) return;
    setState(() {
      _myeventsource = message;
    });
  }
  **/
 
 // Init state is called once when the widget is mounted. It's more like a constructor for your stateful widget which gets called by flutter itself when the widget is mounted.
 // You don't need to call this method explicitly.
 // Note that it won't be called again on hot reload. Refer to the documentation for more about it
 @override
 void initState() {
     super.initState();
     final events = EventSource(Uri.parse("https://example.com/broadcast/"));
     events.events.listen((MessageEvent message) {
         setState(() => _myeventsource = message.data);
     }
 }
 
 // And this method is like a destructor.
 // Called automatically by flutter when this widget is removed.
 @override
 void dispose() {
     // Remember to remove the listeners here
     super.dispose();
 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'EventSource:',
            ),
            Text(
              '$_myeventsource',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

这篇关于Flutter Dart setState无法正常工作:未处理的异常:在构造函数中调用了setState():...(生命周期状态:已创建，没有窗口小部件，未安装)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！