Mutable state of value from viewModel is not working-CodePudding

I have a mutablestate in my ViewModel that I'm trying to set and access in my composable. When I use delegated Property of remember it is working but after creating it in viewModel and accessing it in compose the state of the variable is empty how to use the state with viewModel

Everything is working fine when the state is inside the compose

var mSelectedText by remember { mutableStateOf("") }

But when i use it from viewModel change and set my OutlinedTextField value = mainCatTitle and onValueChange = {mainCatTitle = it} the selected title is not Showing up in the OutlinedTextField is empty

 private val _mainCatTitle = mutableStateOf("")
 val mainCatTitle: State<String> = _mainCatTitle

my Composable

   var mSelectedText by remember { mutableStateOf("") }
   var mainCatTitle = viewModel.mainCatTitle.value

   Column(Modifier.padding(20.dp)) {

    OutlinedTextField(
        value = mainCatTitle,
        onValueChange = { mainCatTitle = it },
        modifier = Modifier
            .fillMaxWidth()
            .onGloballyPositioned { coordinates ->
                mTextFieldSize = coordinates.size.toSize()
            },
        readOnly = true,
        label = { Text(text = "Select MainCategory") },
        trailingIcon = {
            Icon(icon, "contentDescription",
                Modifier.clickable { mExpanded = !mExpanded })
        }
    )

    DropdownMenu(expanded = mExpanded,
        onDismissRequest = { mExpanded = false },
        modifier = Modifier.width(with(
            LocalDensity.current) {
            mTextFieldSize.width.toDp()
        })) {
        selectCategory.forEach {
            DropdownMenuItem(onClick = {
                mainCatTitle = it.category_name.toString()
                mSelectedCategoryId = it.category_id.toString()
                mExpanded = false
                Log.i(TAG,"Before the CategoryName: $mainCatTitle " )
            }) {

                Text(text = it.category_name.toString())
            }
        }
    }
}

Log.i(TAG,"Getting the CategoryName: $mainCatTitle " )
}

in my First log inside the DropDownMenuItem the log is showing the Selected field but second log is empty

Have attached the image

CodePudding user response：

Your'e directly modifying the mainCatTitle variable from onClick, not the state hoisted by your ViewMoel

  DropdownMenuItem(onClick = {
        mainCatTitle = it.category_name.toString()
        ...

and because you didn't provide anything about your ViewModel, I would assume and suggest to create a function if you don't have one in your ViewModel that you can call like this,

DropdownMenuItem(onClick = {
       viewModel.onSelectedItem(it) // <-- this function
       ...
}

and in your ViewModel you update the state like this

fun onSelectedItem(item: String) { // <-- this is the function
    _mainCatTitle.value = item
}