Jetpack Compose中derivedStateOf状态变更未触发的问题排查与解决

问题原因 #

你的代码里有两个核心问题导致derivedStateOf没有触发更新：

1. derivedStateOf无法追踪普通参数的变化：传递给DerivedCompose的value是普通String参数，不是Compose的State类型，derivedStateOf的lambda无法感知它的变化。
2. remember缺少依赖key：用remember包裹derivedStateOf时，没有指定依赖的value，导致value变化时，remember不会重新生成derivedStateOf实例，lambda也不会重新执行。

修复方法 #

方案一：将参数改为State类型（推荐） #

让DerivedCompose接收State<String>类型的参数，这样derivedStateOf能自动追踪状态变化：

@Composable
fun TestDerivedState() {
    Box(Modifier.fillMaxSize()) {
        val email = remember { mutableStateOf("") }
        DerivedCompose(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 24.dp)
                .height(56.dp)
                .align(Alignment.Center),
            valueState = email,
            onClick = {
                email.value = it
            }
        )
    }
}

@Composable
fun DerivedCompose(
    modifier: Modifier = Modifier,
    valueState: State<String>,
    onClick: (String) -> Unit
) {
    val bgColor by remember {
        derivedStateOf {
            Timber.d("value: ${valueState.value}")
            if (valueState.value.isBlank()) Color.Red else Color.Green
        }
    }
    Button(
        onClick = {
            onClick(UUID.randomUUID().toString())
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = bgColor
        ),
        modifier = modifier
    ) {
        Text(text = "test derived state, ${valueState.value}")
    }
}

方案二：给remember添加依赖key #

如果不想修改参数类型，给remember添加value作为依赖key，确保value变化时重新创建derivedStateOf：

@Composable
fun DerivedCompose(
    modifier: Modifier = Modifier,
    value: String,
    onClick: (String) -> Unit
) {
    // 添加value作为remember的依赖key
    val bgColor by remember(value) {
        derivedStateOf {
            Timber.d("value: $value")
            if (value.isBlank()) Color.Red else Color.Green
        }
    }
    Button(
        onClick = {
            onClick(UUID.randomUUID().toString())
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = bgColor
        ),
        modifier = modifier
    ) {
        Text(text = "test derived state, $value")
    }
}

说明 #

• 方案一更符合Compose的状态管理设计，derivedStateOf的核心作用就是基于其他State派生新状态，推荐使用。
• 方案二是临时适配方案，适合无法修改参数类型的场景，但本质是通过重组时重新创建derivedStateOf来触发计算，不是derivedStateOf的原生追踪机制。

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