SetState() 在构造函数中调用

Posted

技术标签:

【中文标题】SetState() 在构造函数中调用【英文标题】:SetState() called in constructor 【发布时间】:2019-11-10 10:08:05 【问题描述】:

我已经建立了一个自定义列表。现在我包含一个复选框,如果我要检查或取消检查,则会引发以下错误:'setState() called in constructor'

class Lists extends StatefulWidget  
     @override
    _List createState() => _List();


class _List extends State<Lists>   
  bool checkedvalue = true;
  @override
Widget build(BuildContext context) 

 return futureBuilder();


Widget futureBuilder()  
  var futureBuilder = new FutureBuilder(
      future: rest.fetchPost(),
      builder: (BuildContext context, AsyncSnapshot snapshot) 
        switch (snapshot.connectionState) 
          case ConnectionState.none:
          case ConnectionState.waiting:
            return new Text('loading...');
          default:
            if (snapshot.hasError)
              return new Text('Error: $snapshot.error');
            else                    
                return listBuilder(context, snapshot);            
        
      
 );

 return new Scaffold(         
      body: futureBuilder,
    );


Widget listBuilder(BuildContext context, AsyncSnapshot snapshot)   
  List<rest.Status> values = snapshot.data;

  if (values == null || values.length == 0)
    return null;
  


  int items = values.length;

  return ListView.builder(   
  itemCount: items,
  itemBuilder: (BuildContext context, int index) 
    String statusText;
    Image image ;
    Uint8List bytes;

    if(statusList.globalStatus != null)
      for(int i=0;i< statusList.globalStatus.length; i++)
        if(values[index].statusID == statusList.globalStatus[i].id)

            if(statusList.globalStatus[i].kurzform != null)
              statusText = statusList.globalStatus[i].kurzform;
            else
              statusText = statusList.globalStatus[i].kurzform;
            

            if (statusList.globalStatus[i].icon != null)
              bytes = base64Decode(statusList.globalStatus[i].icon);
              image = new Image.memory(bytes) ;
             
        

        if(image== null || statusText == null)            
          statusText= 'Kein Status';
          image=  new Image.asset('assets/null.png');
                      
      
       
    return new Container( 
      decoration: new BoxDecoration(
          border: Border(top: BorderSide(
          color: Colors.black26,
          width: 1
          )
        )
      ), 


      child:Column(
        children: <Widget>[
          CustomListItemTwo( 
            statusText: statusText,                               
            status:image,
            materialNR: values[index].uArtText,          
            material: values[index].untersuchungsMaterialName,
            probenArt:  values[index].probenart,
            eingansdatum: values[index].eingangsdatumText,
            patient: values[index].vorname + ' ' + values[index].nachname ,
            geburtsdatum: values[index].geburtstagText ,

          ),
          Checkbox(            
              value: checkedvalue ,           
              onChanged: (bool newValue) =>                
                setState(() 
                  checkedvalue = newValue; 
                )              
            ),
        ] 
      ),
    );
         
  );



I/flutter (5067): ══╡ 手势发现异常╞═════════════════════════════ ═══════════════════════════════════ I/flutter (5067):处理手势时抛出以下断言: I/flutter(5067):setState() 在构造函数中调用:_List#9044e(生命周期状态:已创建,没有小部件,未安装) I/flutter (5067):当您在 State 对象上为尚未插入的小部件调用 setState() 时会发生这种情况 I/flutter (5067): 小部件树呢。没有必要在构造函数中调用 setState(),因为状态是 I/flutter (5067):在最初创建时已经假定它是脏的。

【问题讨论】:

如果它解决了您的问题,请接受答案,这样问题就不会一直悬而未决:) 【参考方案1】:

我下面的代码不是 testet。

您的代码中存在一些概念错误。您应该在构建方法中获取任何内容!

如果您打印例如在你的构建方法中“构建......”(如下所示)你会明白为什么。 build 方法被调用的次数比你想象的要多。因此,您正在调用 WebService 或不止一次,响应将不止一次。实际上setState() 方法会触发构建。

如果你想在一开始就拉一些东西,请使用initState() 方法。该方法将在状态创建时调用一次。对调用的状态使用变量,并在 build 方法中对其做出反应(如前所述,setState() 将触发重建)。

我稍微重构了你的代码,考虑到这个概念,你的开关/复选框问题可能会消失。

另外请看看如何使用Futures https://api.flutter.dev/flutter/dart-async/Future-class.html

class Lists extends StatefulWidget 
  @override
  _List createState() => _List();


class _List extends State<Lists> 
  bool checkedvalue = true;
  bool loading = true;
  AsyncSnapshot asyncSnapshot = null;

  @override
  void initState() 
    futureBuilder();
    super.initState();
  

  @override
  Widget build(BuildContext context) 
    print("building...");
    if(asyncSnapshot != null && asyncSnapshot.hasError)
      return Text("Error : $asyncSnapshot.error");
    
    return (loading) ? Text("LOADING") : listBuilder(context, asyncSnapshot);
  

  void futureBuilder() async 
    rest.fetchPost().then((snapshot) 
      switch (snapshot.connectionState) 
        case ConnectionState.none:
        case ConnectionState.waiting:
          setState(() 
            loading = true;
          );
          break;
        default:
          if (snapshot.hasError) 
            setState(() 
              loading = false;
            );
           else 
            setState(() 
              loading = false;
              asyncSnapshot = snapshot;
            );
          
      
    );
  
  .....

【讨论】:

以上是关于SetState() 在构造函数中调用的主要内容,如果未能解决你的问题,请参考以下文章

Flutter:在构造函数中调用 setState():_SharesListState#6c96a(生命周期状态:已创建,无小部件,未安装)

为啥在类构造函数中使用 setState 方法时 React 会抛出错误?

使用 JSDoc 记录私有构造函数

反应:在构造函数上绑定方法时,在 setState 内实现计时器,状态属性未定义

React生命周期函数

react 生命周期