Problem about state updating in coroutine.

[Magicloud]

Basically, I have state from use_ref, update it in use_coroutine. There are two things concerned here in the state. One is a HashMap, which seems working fine (confirming that my logic is alright). The other is a Vec of a structure, which gets me in trouble.

After updating the Vec. state.read() seems alright. But the UI does not update showing the new value. A debugging div showing the content of the Vec showed the original value.

Here is some code, the UI function is showing a label, when clicking on it, turns into an input. With Enter in the input, it calls the coroutine to post the value and update the segment.

let tagging = use_coroutine(cx, |mut rx| {
        to_owned![state];
        async move {
            while let Some((tag, segment_id)) = rx.next().await {
                let form = format!(r#" {{
    "segment": {},
    "tag": "{}"
}} "#, segment_id, tag);

                let response: Result<_> = try {
                    let resp = Request::post("http://localhost:3000/tagging")
                        .header("Content-Type", "application/json")
                        .body(JsValue::from(form))
                        .send().await?
                        .text().await?;

                    let response = serde_json::from_str::<Value>(&resp)?;
                    let response = response.as_object();
                    let reload_tags = response
                        .and_then(|x| x.get("reload_tags"))
                        .and_then(|x| x.as_bool())
                        .ok_or(anyhow!("Bad response of /tagging: {resp}"))?;
                    let tag_id = response
                        .and_then(|x| x.get("tag_id"))
                        .and_then(|x| x.as_i64())
                        .ok_or(anyhow!("Bad response of /tagging: {resp}"))?;
                    (reload_tags, tag_id)
                };
                match response {
                    Ok((reload_tags, tag_id)) => {
                        let mut w = state.write();
                        if reload_tags {
                            w.tags = None;
                        }
                        w.tagging_segment_ids.remove(&segment_id);
                        if let Some((_, ref mut segments)) = w.content {
                            if
                                let Some((segment_index, _)) = segments
                                    .iter()
                                    .enumerate()
                                    .find(|(_i, x)| { x.id == segment_id })
                            {
                                let old = segments.swap_remove(segment_index);
                                segments.insert(0, SegmentWithTag {
                                    tagged_as: Some(Tag {
                                        id: tag_id
                                            .try_into()
                                            .expect(
                                                "This is i32, but serde_json only extracts i64"
                                            ),
                                        tag,
                                    }),
                                    ..old
                                });
                                // if let Some(segment) = segments.get_mut(segment_index) {
                                //     segment.tagged_as = Some(Tag {
                                //         id: tag_id
                                //             .try_into()
                                //             .expect(
                                //                 "This is i32, but serde_json only extracts i64"
                                //             ),
                                //         tag,
                                //     });
                                // }
                            }
                        }
                        log(format!("Tagged {}", segment_id));
                    }
                    Err(e) => {
                        let mut w = state.write();
                        w.error_message = format!("{e}");
                        w.error_detail = format!("{e:?}");
                    }
                }
            }
        }
    });

    render! {
        if let Some((images_resp, segments)) = state.read().deref().content.clone() {
            render! {
// some outer elements
                    for segment in segments {
                                    if state.read().tagging_segment_ids.contains_key(&segment.id) {
                                        render! {
                                            input {
                                                id: "tag-input-{segment.id}",
                                                onkeydown: move |event| {
                                                    if event.code() == Code::Enter {
                                                        let result: Result<()> = try {
                                                            let tag = state.read();
                                                            let tag = tag.tagging_segment_ids.get(&segment.id).ok_or(anyhow!("Tagging was done."))?;
                                                            log(format!("Tagging {tag} on {}", segment.id));
                                                            tagging.send((tag.clone(), segment.id));
                                                        };
                                                        match result {
                                                            Ok(()) => {
                                                            }
                                                            Err(e) => {
                                                                let mut w = state.write();
                                                                w.error_message = format!("{e}");
                                                                w.error_detail = format!("{e:?}");
                                                                drop(w);
                                                            }
                                                        }
                                                    }
                                                },
                                            }
                                        }
                                    } else {
                                        render! {
                                            div {
                                                id: "tag-div-{segment.id}",
                                                onclick: move |_event| {
                                                    // event.stop_propagation();
                                                    state.write().tagging_segment_ids.insert(segment.id, "".to_string());
                                                },
        
                                                "{segment.tagged_as:?}"
                                            }
                                        }
                                    }
// some outer elements
    }

[Magicloud]

I wonder if the issue was caused by state.read().deref().content.clone() in the second line. Since I cannot do let s = state.read(); if let Some((images_resp, segments)) = &s.content {}, I am trying how can I achieve that.