Flutter中setState首次点击不更新问题求助

你的问题核心是异步操作与UI更新时机不匹配：

• sendMessage是异步函数，里面的await http.post会等待网络请求完成才执行后续的message赋值逻辑。
• 你把sendMessage放在setState的闭包里，setState会同步执行闭包内的代码（仅发起异步请求，不会等待请求完成），然后立即触发UI重建。此时message还未被修改，所以第一次点击后UI不会更新。
• 第二次点击时，前一次请求完成后修改的message会在这次setState触发的重建中显示，因此看起来需要点击两次才生效。

以下两种修改方式都能解决问题，可根据你的场景选择：

方案1：等待异步请求完成后再触发setState #

修改GestureDetector的onTap逻辑，先等待sendMessage执行完毕，再调用setState触发UI更新：

child: GestureDetector(
  onTap: () async {
    if (_key.currentState!.validate()) {
      // 等待异步请求完成，message已被修改
      await sendMessage(dropdownValue, _valueController.text);
      // 触发UI重建，更新Text组件
      setState(() {});
    }
  },
)

方案2：在sendMessage内部触发setState #

把setState移到sendMessage内部，当请求完成并赋值message后直接触发UI更新，外部调用时无需额外处理：

// 修改sendMessage函数
sendMessage(int user, String text) async {
  final sendMessageUri =
      Uri.https('mysecrethater.herokuapp.com', '/api/send/');
  var response = await http.post(
    sendMessageUri,
    headers: {
      "Access-Control-Allow-Origin": "*",
      'Content-Type': 'application/json',
      'Accept': '*/*'
    },
    body: jsonEncode({
      'user': user,
      'value': text,
    }),
  );

  String newMessage;
  if (response.statusCode == 201) {
    newMessage = 'The message was sent successfully';
  } else if (response.statusCode == 406) {
    newMessage = 'Positivity detected. Message not allowed.';
  } else {
    newMessage = 'Some error happened, please try again later.';
  }

  // 赋值后立即触发UI更新
  setState(() {
    message = newMessage;
  });
}

然后修改onTap逻辑，直接调用sendMessage即可：

child: GestureDetector(
  onTap: () {
    if (_key.currentState!.validate()) {
      sendMessage(dropdownValue, _valueController.text);
    }
  },
)

尽量避免用全局变量存储message，建议将message定义为当前State类的成员变量，这更符合Flutter的状态管理规范，也能避免全局状态带来的潜在问题。

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