字符串值变更时Toast多次弹出问题排查

云原生阿岚

2026-8-16

问题原因与解决方案

为什么Toast会重复弹出？

你把Toast.makeText直接写在Composable的主体逻辑里，而Compose的重组机制会在phoneNumber状态更新时重新执行这段代码——只要Composable发生重组，Toast就会被触发一次，这就是重复弹出的核心原因。

解决方法

方法一：用`LaunchedEffect`绑定触发事件

通过一个独立的状态标记请求成功的事件，让Toast只在这个状态触发时执行一次：

val phoneNumber = remember { mutableStateOf("") }
// 标记OTP是否发送成功的状态
val isOtpSent = remember { mutableStateOf(false) }

// 仅在isOtpSent状态变化时执行
LaunchedEffect(isOtpSent.value) {
    if (isOtpSent.value) {
        Toast.makeText(context, "Otp sent to : ${phoneNumber.value}", Toast.LENGTH_SHORT).show()
        // 重置状态，避免后续重组重复触发
        isOtpSent.value = false
    }
}

// 示例：点击按钮触发OTP发送流程
Button(onClick = {
    // 模拟请求成功逻辑
    phoneNumber.value = "13800138000"
    isOtpSent.value = true
}) {
    Text("发送OTP")
}

方法二：在ViewModel的协程中触发Toast

把Toast的触发逻辑放在ViewModel的请求协程里，完全脱离Composable的重组逻辑：

// ViewModel代码
class OtpViewModel : ViewModel() {
    fun sendOtp(phone: String, context: Context) {
        viewModelScope.launch {
            // 替换为实际的网络请求逻辑
            val requestSuccess = true 
            if (requestSuccess) {
                Toast.makeText(context, "Otp sent to : $phone", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

// Composable代码
val viewModel: OtpViewModel = viewModel()
val phoneNumber = remember { mutableStateOf("") }

Button(onClick = {
    viewModel.sendOtp(phoneNumber.value, context)
}) {
    Text("发送OTP")
}