Jetpack Compose TextField的OnValueChange未输入却被调用两次问题

原组件代码 #

fun TextFieldWithIconsAndErrorLabel(
    text: String,
    charLimit: Int = Int.MAX_VALUE,
    keyboardType: KeyboardType = KeyboardType.Text,
    onValueChange: (String) -> Unit,
) {
    val keyboardController = LocalSoftwareKeyboardController.current
    var shouldShowMaxCharLimitError by remember { mutableStateOf(false) }

    BasicTextField(
        modifier = Modifier
            .fillMaxWidth(),
        value = text,
        onValueChange = { newInput ->
            if (newInput.length > charLimit) {
                shouldShowMaxCharLimitError = true
            } else {
                shouldShowMaxCharLimitError = false
                onValueChange(newInput)
            }
        },
        keyboardOptions = KeyboardOptions(
            imeAction = ImeAction.Done,
            keyboardType = keyboardType,
        ),
        singleLine = true,
        keyboardActions = KeyboardActions(
            onDone = {
                keyboardController?.hide()
                onValueChange(text)
                shouldShowMaxCharLimitError = false
            }
        ),
    )
    if (shouldShowMaxCharLimitError) {
        Text(
            modifier = Modifier
                .fillMaxWidth(),
            text = "Max character limit exceeded",
            style = TextStyle(
                fontFamily = PoppinsFamily,
                fontWeight = FontWeight.Medium,
                fontSize = 12.sp,
                color = Color.Red,
                textAlign = TextAlign.Start
            ),
        )
    }
}

问题描述 #

在上述代码中，onValueChange会被多次调用，且布尔值shouldShowMaxCharLimitError会被立即重置。每次输入文本时，这个lambda都会被触发两次，核心问题代码段：

onValueChange = { newInput ->
    if (newInput.length > charLimit) {
        shouldShowMaxCharLimitError = true
    } else {
        shouldShowMaxCharLimitError = false
        onValueChange(newInput)
    }
}

问题原因 #

1. 文本回滚触发二次回调：BasicTextField的value绑定外部传入的text，当输入超过字符限制时，组件不会调用外部onValueChange更新text，Compose重组后TextField会自动回退到原text值，导致onValueChange再次被触发，传入旧文本进而重置错误状态。
2. 状态更新引发重组：修改shouldShowMaxCharLimitError会触发组件重组，重组过程中TextField的value未同步，进一步加剧重复回调问题。

解决方案 #

通过在组件内部维护输入状态，避免依赖外部未更新的文本值，同时优化状态同步逻辑：

fun TextFieldWithIconsAndErrorLabel(
    text: String,
    charLimit: Int = Int.MAX_VALUE,
    keyboardType: KeyboardType = KeyboardType.Text,
    onValueChange: (String) -> Unit,
) {
    val keyboardController = LocalSoftwareKeyboardController.current
    var shouldShowMaxCharLimitError by remember { mutableStateOf(false) }
    // 内部维护输入状态，避免外部值未更新导致的文本回滚
    var internalText by remember { mutableStateOf(text) }

    // 同步外部传入的text变化，保证内部状态与外部一致
    LaunchedEffect(text) {
        internalText = text
    }

    BasicTextField(
        modifier = Modifier.fillMaxWidth(),
        value = internalText,
        onValueChange = { newInput ->
            if (newInput.length > charLimit) {
                shouldShowMaxCharLimitError = true
                // 可选：如果需要自动截断到最大长度，取消下面两行注释
                // internalText = newInput.take(charLimit)
                // shouldShowMaxCharLimitError = false
            } else {
                shouldShowMaxCharLimitError = false
                internalText = newInput
                onValueChange(newInput)
            }
        },
        keyboardOptions = KeyboardOptions(
            imeAction = ImeAction.Done,
            keyboardType = keyboardType,
        ),
        singleLine = true,
        keyboardActions = KeyboardActions(
            onDone = {
                keyboardController?.hide()
                // 确保最终有效文本同步到外部
                if (internalText.length <= charLimit) {
                    onValueChange(internalText)
                }
                shouldShowMaxCharLimitError = false
            }
        ),
    )
    if (shouldShowMaxCharLimitError) {
        Text(
            modifier = Modifier.fillMaxWidth(),
            text = "超过最大字符限制",
            style = TextStyle(
                fontFamily = PoppinsFamily,
                fontWeight = FontWeight.Medium,
                fontSize = 12.sp,
                color = Color.Red,
                textAlign = TextAlign.Start
            ),
        )
    }
}

修改说明 #

• 新增internalText作为组件内部输入状态，彻底避免因外部文本未更新导致的TextField回滚问题，从根源消除重复回调。
• 通过LaunchedEffect监听外部text变化，确保内部状态与外部传入值同步，比如父组件更新文本时，内部输入框能实时响应。
• 优化onDone逻辑，使用当前内部输入值同步到外部，而非原代码中的旧text值，保证数据一致性。
• 保留错误提示逻辑，同时提供自动截断文本的可选方案，可根据业务需求调整。

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