Jetpack Compose中Map变更无法触发组件重组的问题修复求助

问题原因 #

你的代码点击按钮后，只是创建了一个和原Map内容完全一致的新HashMap，但mutableStateOf默认使用结构相等性检查——只要两个Map的内容完全相同，就会被判定为值未变化，不会触发State更新，自然也不会触发组件重组和LaunchedEffect的重新执行。即使给子组件加了key(map)，由于map的结构相等，key没有变化，子组件也不会重建。

解决方案 #

根据实际需求，可以选择以下两种修复方式：

方式1：修改Map内容（推荐，符合真实场景）

如果实际场景是请求参数内容变化才需要触发请求，直接修改Map的内容即可，结构相等性检查会识别到值变化并触发更新：

@Preview
@Composable
fun test() {
    var map by remember { mutableStateOf(mapOf<String, Any>()) }
    Column {
        Button(
            onClick = {
                // 给Map添加或修改参数，让内容发生变化
                map = map + ("tapCount" to (map["tapCount"] as? Int ?: 0) + 1)
            }
        ) {
            Text(text = "Tap")
        }

        testWidget1(map = map)
    }
}

@Composable
fun testWidget1(map: Map<String, Any>) {
    var testInt by remember { mutableStateOf(0) }
    
    // map内容变化时，LaunchedEffect会自动重新执行
    LaunchedEffect(map) {
        testInt += 1
        request()
    }
    
    Text(text = "$testInt")
}

fun request() {}

方式2：强制使用引用相等性检查

如果需要在Map内容不变但引用变化时触发更新（比如特殊刷新场景），可以给mutableStateOf指定neverEqualPolicy()，只要引用变化就会判定State更新：

@Preview
@Composable
fun test() {
    // 使用neverEqualPolicy，只要引用变化就触发State更新
    var map by remember { mutableStateOf(mapOf<String, Any>(), neverEqualPolicy()) }
    Column {
        Button(
            onClick = {
                map = HashMap(map)
            }
        ) {
            Text(text = "Tap")
        }

        testWidget1(map = map)
    }
}

@Composable
fun testWidget1(map: Map<String, Any>) {
    var testInt by remember { mutableStateOf(0) }
    
    LaunchedEffect(map) {
        testInt += 1
        request()
    }
    
    Text(text = "$testInt")
}

fun request() {}

额外说明 #

在真实的网络请求场景中，推荐使用方式1——只有当请求参数的实际内容发生变化时才触发请求和重组，这更符合Compose的状态管理设计原则，避免不必要的性能消耗。

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