About LazyColumn.I have requested new data, but the UI has not been updated. Only a swipe will render the new data

Question

val lazyListState = rememberLazyListState()
    val isScrollToBottom = remember(lazyListState) {
        derivedStateOf {
            val index = lazyListState.layoutInfo.visibleItemsInfo.lastOrNull()?.index
            val count = lazyListState.layoutInfo.totalItemsCount - 1
            lazyListState.isScrollInProgress.not() && index == count
        }
    }
    Box(modifier = Modifier.pullRefresh(pullRefreshState)) {
        if (!data.isNullOrEmpty()) {
            LazyColumn(
                modifier = Modifier
                    .fillMaxSize()
                    .background(colorResource(id = R.color.bgColorSecondary)),
                verticalArrangement = Arrangement.spacedBy(8.dp),
                state = lazyListState
            ) {
                itemsIndexed(data) { index: Int, item: T ->
                    Surface(elevation = 1.dp) {
                        Column(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(colorResource(id = R.color.white))
                                .padding(horizontal = 16.dp, vertical = 16.dp)

                        ) {
                            content(index, item)
                        }
                    }
                }
                item {
                    Text(
                        text = "加载更多", modifier = Modifier
                            .fillMaxWidth()
                            .height(20.dp)
                    )
                }
            }
            PullRefreshIndicator(
                refreshing = isRefreshing,
                state = pullRefreshState,
                modifier = Modifier.align(Alignment.TopCenter)
            )
        } else {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .clickable { reload.invoke() },
                contentAlignment = Alignment.Center
            ) {
                Text(text = "加载失败，请点击重试", color = colorResource(id = R.color.textColorPrimary))
            }
        }
    }

    LaunchedEffect(isScrollToBottom.value) {
        if (isScrollToBottom.value && !isRefreshing) {
            loadMore.invoke()
//            delay(200)
        }
    }

I am listening that when LazyColumn slides to the last data, it will trigger the loading of the next page's data. I have requested the data on the next page of the log, but the UI has not been updated. The new data will only be displayed after a slight upward slide. Please help me resolve this issue

Answer 1

Ensure the data variable is updated after fetching new data. Use collectAsState() to observe changes in the data and trigger recomposition. Add a key to LazyColumn for proper recomposition:

val data by viewModel.data.collectAsState()

LazyColumn(
    ...
    contentPadding = PaddingValues(bottom = 20.dp),
    key = data.hashCode()
) {
    ...
}