Jetpack Compose Web中按钮点击异常问题求助

问题根源 #

1. 你写的words.map { P { Text(it) }}只是生成了一组Composable对象，但没有将它们添加到布局树中，这段代码完全没起到渲染作用。
2. 就算正确渲染了列表，**不给列表项指定唯一key**会触发Compose的组件复用逻辑：当列表更新时，Compose会根据组件位置而非内容来复用现有组件，导致后续点击foo按钮时，按钮的点击事件被错误关联到bar按钮上。

修正后的代码方案 #

方案一：使用Column+forEachIndexed（适合短列表）

fun main() {
    renderComposableInBody {
        val words = remember { mutableStateListOf<String>() }
        
        Column {
            // 用forEachIndexed遍历，给每个P元素指定索引作为唯一key
            words.forEachIndexed { index, word ->
                P(key = index) { Text(word) }
            }
            
            Button(attrs = { onClick { words.add("foo") } }) { Text("foo") }
            Button(attrs = { onClick { words.add("bar") } }) { Text("bar") }
        }
    }
}

方案二：使用LazyColumn（适合长列表）

fun main() {
    renderComposableInBody {
        val words = remember { mutableStateListOf<String>() }
        
        LazyColumn {
            // 给每个列表项指定内容作为唯一key（如果内容不会重复）
            items(words, key = { it }) { word ->
                P { Text(word) }
            }
            
            // 单独添加按钮项
            item {
                Button(attrs = { onClick { words.add("foo") } }) { Text("foo") }
            }
            item {
                Button(attrs = { onClick { words.add("bar") } }) { Text("bar") }
            }
        }
    }
}

关键说明 #

• 必须将列表元素放入布局容器（如Column、LazyColumn）中，Compose才会渲染这些元素。
• 指定key是解决点击事件错乱的核心：Compose通过key识别组件的唯一性，避免因列表更新导致的组件复用错误，确保每个按钮的点击逻辑始终绑定正确。

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