Removed From the lazy column list

Question

Whenever I try to remove from the lazy column list I get arrayIndexOutOfBoundException This is the array that

var productsList = remember { mutableStateListOf<Product>() }//I load products in this list

Whenever the user presses a certain button I do the following

productsList.remove(item) 

I get array arrayIndexOutOfBoundException this is how I loop as well

itemsIndexed(productsList) { index, item ->
        

Anyway to avoid that error

Whole code for those interested:

fun MyProducts(navController: NavController,myProductsViewModel: MyProductsViewModel= viewModel()) {
    var productsList = remember { mutableStateListOf<Product>() }
    val scope = rememberCoroutineScope()

    val listState = rememberLazyListState()

    var currentImage = remember { mutableStateListOf<Int>() }

    LaunchedEffect(key1 = Unit){
       myProductsViewModel.getShop()
        productsList.addAll(myProductsViewModel.productsList)
        currentImage.addAll(List(productsList.size) {0})

    }
    var pickedImage: MutableState<String?> =remember { mutableStateOf("") }


    BackHandler() {
        navController.popBackStack()
    }
       LazyColumn(
           Modifier
               .fillMaxSize()
               .padding(start = 16.dp),
            horizontalAlignment = Alignment.Start,
            verticalArrangement = Arrangement.spacedBy(8.dp)
            ,state = listState
        ) {
           itemsIndexed(productsList) { index, item ->
                                   .clickable {when(icon){
                                       Icons.Default.Delete->{
                                           scope.launch {
                                               myProductsViewModel.removeProducts(item.product_id,item.shop_id,item)
                                            productsList.remove(item)
                                           }
                                       }
                                       Icons.Default.Edit->{

                                       }

I am accessing the same list in the rest of the code but I don't think it is relevant to the problem

Answer 1

You have not provided a proper code example but it sounds like you are not updating the list and the lazy column properly so the item is removed from the list but the lazy column does not know about it.

Answer 2

From my point of view you are generally having some bad practice in your code. For example:

LaunchedEffect(key1 = Unit){
   myProductsViewModel.getShop()
    productsList.addAll(myProductsViewModel.productsList)
    currentImage.addAll(List(productsList.size) {0})
}

This all looks like stuff that should be done in the viewmodel. Generally a composable is supposed to convert state to UI, that means, it shouldnt contain any business logic. The code snipped I just showed looks like something that can be done in the viewmodel.

Having something like this

var productsList = remember { mutableStateListOf<Product>() }

and then adding the elements with a LaunchedEffect is not how composables are supposed to be used.

First your myProductsViewModel.productsList should be a LiveData object thats holding your product list. Then you are supposed to do the following:

val productList by myProductsViewModel.productsList.observeAsState(emptyList())

Then you show it in your composable. If you want to change the list content, you should call a method for that on the viewmodel, which then updates the livedata object of your list accordingly.

I you hope I explained in clearly enough. Let me know if you have questions.