Flutter报错：setState()在构造函数中调用，跨组件状态更新求助

你遇到的错误核心在于：直接在LeftSideState中手动实例化RightSideState对象，这个实例和Flutter框架实际渲染的RightSide组件对应的State完全是两个独立对象，且手动new出来的State从未被框架挂载（mounted），调用其setState自然会触发报错。

将需要共享的状态（即nome）提升到两个组件的共同父组件中，通过回调传递点击事件，由父组件统一管理状态并更新子组件。

修改后完整代码 #

1. 父组件（管理共享状态） #

class MainScreen extends StatefulWidget {
  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  // 共享状态放在父组件中
  String nome = 'mkh';

  // 更新状态的方法
  void updateNome() {
    setState(() {
      nome = 'sdasdfad';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // 给LeftSide传入点击回调
        LeftSide(onItemTap: updateNome),
        // 给RightSide传入最新的nome值
        RightSide(nome: nome),
      ],
    );
  }
}

2. LeftSide组件（接收回调） #

class LeftSide extends StatefulWidget {
  // 接收父组件传递的点击回调
  final VoidCallback onItemTap;

  const LeftSide({super.key, required this.onItemTap});

  @override
  State<StatefulWidget> createState() => LeftSideState();
}

class LeftSideState extends State<LeftSide> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: 350,
        child: Container(
          color: Color.fromARGB(255, 241, 160, 29),
          padding: EdgeInsets.all(30),
          child: ListView(
            scrollDirection: Axis.vertical,
            children: <Widget>[
              for (int i = 0; i < 15; i++)
                Padding(
                  padding: EdgeInsets.only(bottom: 20),
                  child: Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(12),
                          color: Colors.indigo),
                      child: ListTile(
                        title: Center(
                            child: Text('asdfadfadx',
                                style: TextStyle(fontSize: 16.0))),
                        leading: Icon(
                          Icons.account_circle_rounded,
                          size: 30,
                        ),
                        trailing: Icon(Icons.arrow_forward_ios),
                        textColor: Colors.white,
                        iconColor: Colors.white,
                        // 调用父组件传入的回调
                        onTap: widget.onItemTap,
                      )),
                )
            ],
          ),
        ));
  }
}

3. RightSide组件（接收状态值） #

// 改为StatelessWidget，因为状态由父组件管理，只需展示数据
class RightSide extends StatelessWidget {
  final String nome;

  const RightSide({super.key, required this.nome});

  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: Container(
      color: Color.fromARGB(255, 241, 170, 29),
      child: Padding(
        padding: EdgeInsets.only(top: 80, left: 30),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Text(
            nome,
            style: TextStyle(fontSize: 40, color: Colors.indigo),
          ),
          Text('' + '' + '' + '',
              style: TextStyle(fontSize: 24, color: Colors.indigo)),
          Text('' + '',
              style: TextStyle(fontSize: 24, color: Colors.indigo)),
          Text(
              '' +
                  '' +
                  '' +
                  '' +
                  '' +
                  '',
              style: TextStyle(fontSize: 24, color: Colors.indigo)),
          Text('' + '',
              style: TextStyle(fontSize: 24, color: Colors.indigo)),
          Text('' + '',
              style: TextStyle(fontSize: 24, color: Colors.indigo)),
        ]),
      ),
    ));
  }
}

为什么这样解决？ #

• 遵循Flutter单向数据流原则，共享状态由共同父组件管理，避免跨组件直接操作State的错误做法。
• LeftSide通过回调通知父组件更新状态，父组件调用setState后会自动重新构建RightSide并传入最新的状态值，实现UI更新。

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