Frustrating troubleshooting when passing inadequate key to the for-each element

[sharas859]

I'm fairly new to this, so I made the silly mistake of passing something as the key to the for each element that did not cause an error but prevented any nodes of the element from being updated.
As a beginner, this was quite frustrating to track down, since the nodes rendered initially but did not update.
I don't know if it is possible to prevent this or have some sort of warning but it sure would have been helpful to protect me from my own stupidity.

[sharas859]

Example code:

   //map: HashMap<char, Counts>
        <For
            each = move || map.get()
            key = |(k,_)| {*k as i32}
            view = move |cx, (k,v)|{
                view! { cx,
                    <div>
                        {k}
                        <div>
                            {v.count1}
                        </div>
                        <div>
                            {v.count2}
                        </div>
                    </div>
                }
            }
        />

[gbj]

I can totally see how this would be frustrating!

Just to clarify for me: is map like ReadSignal<HashMap<char, Counts>> or something? Or can you provide a slightly more complete example so I can play around with it and see if there are good debug warnings we could provide?

If the problem is that the {v.count1} and {v.count2} fields didn't update when the signal changed, that's working as designed unless those count1 and count2 fields are signals, in which case I'm not sure what's up. If the key doesn't change, the row won't be re-rendered, and if the values are plain values, not static, there's nothing causing them to change.

[sharas859]

Yes, map is ReadSignal<HashMap<char, Counts>>.
I also tried ReadSignal<HashMap<char, (ReadSingal(Counts), WriteSignal(Counts))>
At this point, I believe, I have accidentally circumvented this problem by hashing the struct as the key.
I gather what I should actually do is make the individual values of the Counts struct signals, unless there is a better way to get this sort of behavior? In that case the warning should maybe be related to passing in nested data.
Also, right now I'm accessing the HashMap inside closures using a ReadSignal, but the map itself doesn't need to be reactive. Is that how I should do it or is there some other way to pass the map into a closure without it being moved?

I'll also attach the code where I isolated the issue.
main.txt

edit: To clarify, me using the struct as the key fixing the issue caused me to assume the issue was related to the key, but that's probably not true and only fixes the issue since the key changes every time the struct gets updated

[gbj]

Here's a working version of what you sent, with a few small changes:

1. If you want to modify a row without its key changing, do it by modifying an inner signal. See the counters or todomvc examples in this repo for a comparison.
2. Don't nest the signal updates inside each other. In the example below, instead, I returned the counts object that's stored in the map out of try_update(), so that to two sub-signals can be modified in the click.

use leptos::*;
use std::collections::HashMap;

fn main() {
    mount_to_body(|cx| view! { cx, <App/> })
}

#[derive(Debug, Copy, Clone, PartialEq, Eq, Hash)]
struct Counts {
    count1: RwSignal<i32>,
    count2: RwSignal<i32>,
}

#[component]
fn App(cx: Scope) -> impl IntoView {
    let m: HashMap<char, Counts> = HashMap::new();
    let (map, set_map) = create_signal(cx, m);
    view! { cx,
        <button on:click=move |_| {
            let counts = set_map.try_update(|map| {
                let counts = map
                    .entry('c')
                    .or_insert(Counts {
                        count1: create_rw_signal(cx, 0),
                        count2: create_rw_signal(cx, 0),
                    });
                *counts
            }).unwrap();

            counts.count1.update(|n| *n += 1);
            counts.count2.update(|n| *n += 3);
        }>
            "Click me: " {
                let counts = move || {
                    map
                        .with(|x| {
                            if let Some(counts) = x.get(&'c') { counts.count1.get() } else { 0 }
                        })
                };
                log!("{}", 'f' as i32);
                counts
            }
        </button>
        <For
            each=move || map.get()
            key=|(k, _)| { *k as i32 }
            view=move |cx, (k, v)| {
                view! { cx, <div>{k} <div>{v.count1}</div> <div>{v.count2}</div></div> }
            }
        />
    }
}

[sharas859]

Alright, I will go with that then.
I already had a look at those but it's a lot to take in all at once.

Thank you very much!